Aller au contenu
FR

3 icônes · licence MIT

Icônes animées de contrôles de formulaire

Une case à cocher, un bouton radio et un interrupteur qui s’animent entre l’état coché et l’état décoché. Utilisez-les là où un champ standard paraît plat, comme les checklists d’onboarding ou les écrans de réglages, tout en gardant l’état lisible d’un coup d’œil.

Les 3 icônes basculent entre deux états au clic. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON, ainsi qu’en SVG statique, gratuitement pour un usage commercial sous licence MIT.

Toutes les icônes de formulaire

Où les utiliser

  • Interrupteurs de réglages pour les fonctionnalités et les préférences
  • Checklists d’onboarding et listes de tâches
  • Choix uniques dans les sondages et les sélecteurs d’offre
  • Cases d’acceptation des conditions et de consentement

Par interaction

  • Icônes animées à bascule au clic · 3

    Bascule entre deux états au clic, ou change d’état immédiatement quand la réduction des animations est activée. Checkbox, Radio button, Toggle.

En ajouter une à votre app

Avec React, installez react-useanimations et importez l’icône : elle joue d’elle-même son interaction « bascule au clic ». Toutes les icônes de cette catégorie fonctionnent de la même façon : remplacez checkBox par le nom indiqué sur leur page.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import checkBox from 'react-useanimations/lib/checkBox';

<UseAnimations animation={checkBox} size={32} />

Avec shadcn/ui, la CLI ajoute un composant prêt à l’emploi :

npx shadcn@latest add https://useanimations.com/r/check-box.json
import { AnimatedCheckBox } from '@/components/animations/check-box';

<AnimatedCheckBox size={24} />

Vous n’utilisez pas React ? Chaque icône est un fichier Lottie JSON à l’adresse /icons/<id>.json ; la page Icônes Lottie présente les lecteurs pour le web, iOS, Android et Flutter.

Questions fréquentes

Quelles icônes animées de contrôles de formulaire sont incluses ?

3 icônes : Checkbox, Radio button et Toggle. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de contrôles de formulaire dans React ?

Installez react-useanimations, ajoutez import checkBox from 'react-useanimations/lib/checkBox' et affichez <UseAnimations animation={checkBox} size={32} />. L’icône joue son interaction « bascule au clic » et suit la couleur du texte. Avec shadcn/ui, lancez plutôt npx shadcn@latest add https://useanimations.com/r/check-box.json.

Puis-je utiliser ces icônes animées de contrôles de formulaire sans React ?

Oui. Chaque icône est un fichier Lottie JSON disponible à l’adresse https://useanimations.com/icons/<id>.json (par exemple https://useanimations.com/icons/check-box.json), lisible avec lottie-web, lottie-ios, lottie-android ou le package lottie de Flutter ; les SVG statiques se trouvent sur la page de chaque icône (en anglais). Aucune n’utilise d’expressions : la version light de lottie-web suffit.