Radio Group
Satır ve kart görünümlü tek seçim seçenekleri.
Radio.tsx
Kart Seçim Izgarası (Card Mode)
Satır İçi Liste (Default Mode & Sage Rengi)
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/radio-group.jsonKullanım Örneği
import { RadioGroup } from "@/components/ui/Radio"
<RadioGroup label="Plan" options={plans} selectedValue={plan} onChange={setPlan} variant="card" />Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| name | string | — | Native radio grup adı. |
| options | RadioOption[] | — | Değer, etiket ve açıklama içeren seçenekler. |
| selectedValue | string | — | Kontrollü seçili değer. |
| onChange | (value: string) => void | — | Seçim callback'i. |
| variant | "default" | "card" | "default" | Satır içi veya kart düzeni. |
| columns | 1 | 2 | 3 | 4 | 1 | Responsive sütun sayısı. |
| error | string | — | Grup hata mesajı. |