Langsung ke konten
ID

3 ikon · Berlisensi MIT

Ikon animasi kontrol formulir

Checkbox, radio button, dan toggle switch yang beranimasi saat berpindah antara keadaan tercentang dan tidak tercentang. Pakai di tempat input biasa terasa datar, misalnya checklist onboarding dan layar pengaturan, sambil tetap menjaga keadaannya mudah dibaca sekilas.

Semua 3 ikon di kategori ini beralih antara dua keadaan saat diklik. Setiap ikon tersedia sebagai komponen React, komponen shadcn/ui, dan animasi Lottie JSON, lengkap dengan SVG statis. Semuanya gratis untuk penggunaan komersial di bawah lisensi MIT.

Semua ikon formulir

Tempat memakainya

  • Sakelar pengaturan untuk fitur dan preferensi
  • Checklist onboarding dan daftar tugas
  • Pilihan tunggal di survei dan pemilih paket
  • Checkbox persetujuan syarat dan ketentuan

Berdasarkan interaksi

  • Ikon animasi toggle saat diklik · 3

    Beralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih. Checkbox, Radio button, Toggle.

Tambahkan ke aplikasi Anda

Di React, instal react-useanimations lalu import ikonnya; ikon langsung menjalankan interaksi toggle saat klik bawaannya. Semua ikon di kategori ini bekerja dengan cara yang sama: ganti checkBox dengan nama yang tertera di halaman ikonnya.

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

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

Dengan shadcn/ui, CLI-nya menambahkan komponen siap pakai:

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

<AnimatedCheckBox size={24} />

Tidak memakai React? Setiap ikon adalah file Lottie JSON di /icons/<id>.json; lihat Ikon Lottie untuk player web, iOS, Android, dan Flutter.

FAQ

Ikon animasi kontrol formulir apa saja yang tersedia?

3 ikon: Checkbox, Radio button, dan Toggle. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi kontrol formulir ini di React?

Instal react-useanimations, tambahkan import checkBox from 'react-useanimations/lib/checkBox', lalu render <UseAnimations animation={checkBox} size={32} />. Ikon menjalankan interaksi toggle saat klik bawaannya dan mengikuti warna teks. Jika memakai shadcn/ui, jalankan npx shadcn@latest add https://useanimations.com/r/check-box.json sebagai gantinya.

Bisakah ikon animasi kontrol formulir ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON di https://useanimations.com/icons/<id>.json (misalnya https://useanimations.com/icons/check-box.json) yang bisa diputar dengan lottie-web, lottie-ios, lottie-android, atau paket lottie untuk Flutter; SVG statis tersedia di halaman masing-masing ikon (halaman ikon hanya dalam bahasa Inggris). Tidak ada yang memakai expression, jadi build ringan lottie-web sudah cukup.