bloxa

Switch

FREE

İki boyutlu, tutamacın içine ikon konabilen açma/kapama anahtarı.

Canlı düzenle

Ayarları değiştir; bileşen ve kodu anında güncellensin.

Ayarlar
Kod
import { Moon, Sun } from "lucide-react";
import { Label } from "@/components/ui/field";
import { Switch } from "@/components/ui/switch";

<Switch
  id="switch"
  checkedIcon={<Moon />}
  uncheckedIcon={<Sun />}
/>
<Label htmlFor="switch">Dark mode</Label>

Kurulum

Terminal
npx @bloxa/cli add switch
# or: npx shadcn@latest add @bloxa/switch

Otomatik kurulan paketler: radix-ui

Örnekler

Boyutlar

İkonlu

API

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Switch

ÖzellikTipVarsayılanAçıklama
size"sm" | "md""md"Boyut.
checkedIconReactNode—Açıkken tutamaçtaki ikon.
uncheckedIconReactNode—Kapalıyken tutamaçtaki ikon.