İçeriğe geç
TR

3 ikon · MIT lisanslı

Animasyonlu form kontrolü ikonları

İşaretli ve işaretsiz durumları arasında animasyonla geçen bir onay kutusu, bir radyo düğmesi ve bir toggle switch. Sıradan bir input’un yavan kaldığı yerlerde, örneğin onboarding kontrol listelerinde ve ayar ekranlarında kullanın; durum yine tek bakışta okunur.

3 ikonun tamamı tıklandığında iki durum arasında geçiş yapar. Her biri React bileşeni, shadcn/ui bileşeni, Lottie JSON animasyonu ve statik SVG olarak sunulur. MIT lisansı sayesinde ticari projelerde de ücretsiz kullanılabilir.

Form kategorisindeki tüm ikonlar

Nerede kullanılır

  • Özellikler ve tercihler için ayar anahtarları
  • Onboarding ve yapılacaklar kontrol listeleri
  • Anketlerde ve plan seçicilerde tek seçimli seçenekler
  • Kullanım koşulları ve onay kutuları

Etkileşime göre

Uygulamanıza ekleyin

React’te react-useanimations paketini kurup ikonu import etmeniz yeterli; ikon kendi etkileşimini (Tıklayınca geçiş) kendiliğinden oynatır. Bu kategorideki her ikon aynı şekilde çalışır: checkBox yerine ikonun sayfasındaki adı yazın.

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

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

shadcn/ui ile CLI hazır bir bileşen ekler:

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

<AnimatedCheckBox size={24} />

React kullanmıyor musunuz? Her ikon /icons/<id>.json adresinde bir Lottie JSON dosyasıdır; web, iOS, Android ve Flutter oynatıcıları için Lottie ikonları sayfasına bakın.

Sık sorulan sorular

Form kategorisinde hangi ikonlar var?

3 ikon: Checkbox, Radio button ve Toggle. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu form kontrolü ikonları React’te nasıl kullanılır?

react-useanimations paketini kurun, import checkBox from 'react-useanimations/lib/checkBox' satırını ekleyin ve <UseAnimations animation={checkBox} size={32} /> ile render edin. İkon kendi etkileşimini (Tıklayınca geçiş) oynatır ve metin rengini izler. shadcn/ui kullanıyorsanız bunun yerine npx shadcn@latest add https://useanimations.com/r/check-box.json komutunu çalıştırın.

Bu animasyonlu form kontrolü ikonları React olmadan kullanılabilir mi?

Evet. Her ikon https://useanimations.com/icons/<id>.json adresinde bir Lottie JSON dosyasıdır (örneğin https://useanimations.com/icons/check-box.json) ve lottie-web, lottie-ios, lottie-android ya da Flutter’ın lottie paketiyle oynatılabilir; statik SVG’ler her ikonun kendi sayfasında (ikon sayfaları yalnızca İngilizce). Hiçbiri ifade (expression) kullanmadığı için lottie-web’in hafif sürümü (light build) yeterlidir.