Přejít na obsah
CS

3 ikony · licence MIT

Animované ikony formulářových prvků

Zaškrtávací políčko, přepínač (radio button) a vypínač, které animují přechod mezi zaškrtnutým a nezaškrtnutým stavem. Hodí se tam, kde obyčejný input působí ploše, třeba v onboardingových checklistech a v nastavení, a stav je přitom pořád čitelný na první pohled.

Všechny 3 ikony se kliknutím přepínají mezi dvěma stavy. Každá ikona je k dispozici jako React komponenta, komponenta pro shadcn/ui, Lottie JSON animace a statické SVG, zdarma i pro komerční použití pod licencí MIT.

Všechny ikony v kategorii Formuláře

Kde je použít

  • Vypínače funkcí a předvoleb v nastavení
  • Onboardingové checklisty a seznamy úkolů
  • Výběr jedné možnosti v dotaznících a při volbě tarifu
  • Zaškrtávací políčka pro souhlas s podmínkami

Podle interakce

Přidejte ikonu do aplikace

V Reactu nainstalujte react-useanimations a naimportujte ikonu; svou interakci „přepínání kliknutím“ přehraje sama. Všechny ikony v této kategorii fungují stejně: checkBox jen nahraďte názvem ze stránky požadované ikony.

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

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

Se shadcn/ui vám CLI přidá hotovou komponentu:

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

<AnimatedCheckBox size={24} />

Nepoužíváte React? Každá ikona je Lottie JSON soubor na adrese /icons/<id>.json; přehrávače pro web, iOS, Android a Flutter popisuje stránka Lottie ikony.

Časté dotazy

Které animované ikony formulářových prvků sada obsahuje?

3 ikony: Checkbox, Radio button a Toggle. Všechny můžete zdarma používat v osobních i komerčních projektech pod licencí MIT, bez nutnosti uvádět autora.

Jak použít animované ikony formulářových prvků v Reactu?

Nainstalujte react-useanimations, přidejte import checkBox from 'react-useanimations/lib/checkBox' a vykreslete <UseAnimations animation={checkBox} size={32} />. Ikona přehraje svou interakci „přepínání kliknutím“ a převezme barvu textu. Se shadcn/ui místo toho spusťte npx shadcn@latest add https://useanimations.com/r/check-box.json.

Můžu animované ikony formulářových prvků použít i bez Reactu?

Ano. Každá ikona je Lottie JSON soubor na adrese https://useanimations.com/icons/<id>.json (například https://useanimations.com/icons/check-box.json), který přehraje lottie-web, lottie-ios, lottie-android nebo balíček lottie pro Flutter; statická SVG najdete na stránce každé ikony (stránky ikon jsou v angličtině). Žádná z nich nepoužívá výrazy (expressions), takže stačí light build lottie-web.