Chuyển đến nội dung chính
VI

3 icon · Giấy phép MIT

Icon điều khiển biểu mẫu động

Một checkbox, một radio button và một công tắc toggle chuyển động giữa trạng thái chọn và bỏ chọn. Hãy dùng chúng ở những chỗ mà input thông thường trông quá đơn điệu, như checklist onboarding hay màn hình cài đặt, mà trạng thái vẫn dễ đọc chỉ trong một cái nhìn.

Cả 3 icon đều chuyển giữa hai trạng thái khi click. Mỗi icon có sẵn dưới dạng React component, component shadcn/ui và animation Lottie JSON, kèm SVG tĩnh, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT.

Tất cả icon biểu mẫu

Dùng ở đâu

  • Công tắc bật/tắt tính năng và tùy chọn trong cài đặt
  • Checklist onboarding và danh sách việc cần làm
  • Lựa chọn một đáp án trong khảo sát và bảng chọn gói
  • Checkbox đồng ý điều khoản

Theo tương tác

  • Icon động bật/tắt khi click · 3

    Chuyển giữa hai trạng thái khi click, hoặc chuyển ngay lập tức khi người dùng bật giảm chuyển động. Checkbox, Radio button, Toggle.

Thêm vào ứng dụng của bạn

Với React, hãy cài react-useanimations rồi import icon; icon sẽ tự chạy tương tác “Click bật/tắt” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay checkBox bằng tên ghi trên trang của icon đó.

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

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

Với shadcn/ui, CLI sẽ thêm sẵn một component:

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

<AnimatedCheckBox size={24} />

Không dùng React? Mỗi icon là một tệp Lottie JSON tại /icons/<id>.json; xem Icon Lottie để biết các player cho web, iOS, Android và Flutter.

Câu hỏi thường gặp

Bộ icon điều khiển biểu mẫu động gồm những icon nào?

3 icon: Checkbox, Radio button và Toggle. Tất cả đều miễn phí cho dự án cá nhân và thương mại theo giấy phép MIT, không bắt buộc ghi nguồn.

Dùng các icon điều khiển biểu mẫu động này trong React như thế nào?

Cài react-useanimations, thêm import checkBox from 'react-useanimations/lib/checkBox' rồi render <UseAnimations animation={checkBox} size={32} />. Icon sẽ chạy tương tác “Click bật/tắt” của nó và tự lấy theo màu chữ. Nếu dùng shadcn/ui, hãy chạy npx shadcn@latest add https://useanimations.com/r/check-box.json.

Có dùng được các icon điều khiển biểu mẫu động này mà không cần React không?

Được. Mỗi icon là một tệp Lottie JSON tại https://useanimations.com/icons/<id>.json (ví dụ https://useanimations.com/icons/check-box.json), phát được bằng lottie-web, lottie-ios, lottie-android hoặc package lottie của Flutter; SVG tĩnh có trên trang riêng của từng icon (bằng tiếng Anh). Không icon nào dùng expression, nên bản rút gọn (light) của lottie-web là đủ.