Pular para o conteúdo
PT

3 ícones · licença MIT

Ícones animados de controles de formulário

Um checkbox, um radio button e um switch que animam entre os estados marcado e desmarcado. Use-os onde um input comum parece sem graça, como checklists de onboarding e telas de configurações, sem perder a leitura do estado num relance.

Todos os 3 ícones alternam entre dois estados no clique. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON, além de SVGs estáticos, e é gratuito para uso comercial sob a licença MIT.

Todos os ícones de formulários

Onde usar

  • Switches de recursos e preferências nas configurações
  • Checklists de onboarding e listas de tarefas
  • Opções de escolha única em pesquisas e seletores de plano
  • Checkboxes de termos e consentimento

Por interação

Adicione um ao seu app

Com React, instale o react-useanimations e importe o ícone; ele executa a interação “Alternar no clique” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque checkBox pelo nome que aparece na página do ícone.

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

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

Com o shadcn/ui, a CLI adiciona um componente pronto:

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

<AnimatedCheckBox size={24} />

Não usa React? Cada ícone é um arquivo Lottie JSON em /icons/<id>.json; veja em Ícones Lottie os players para web, iOS, Android e Flutter.

Perguntas frequentes

Quais ícones animados de controles de formulário estão incluídos?

3 ícones: Checkbox, Radio button e Toggle. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes ícones animados de controles de formulário no React?

Instale o react-useanimations, adicione import checkBox from 'react-useanimations/lib/checkBox' e renderize <UseAnimations animation={checkBox} size={32} />. O ícone executa a interação “Alternar no clique” e segue a cor do texto. Se você usa shadcn/ui, rode npx shadcn@latest add https://useanimations.com/r/check-box.json.

Posso usar estes ícones animados de controles de formulário sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/check-box.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter; os SVGs estáticos ficam na página de cada ícone (em inglês). Nenhum deles usa expressões, então o build light do lottie-web é suficiente.