Komponen / Aksi
SegmentedControl
Pengalih 2–5 tampilan yang saling eksklusif untuk isi yang sama: Daftar / Board, Minggu / Bulan / Kuartal. Pilihan langsung berlaku.
Import
tsx
import { SegmentedControl } from '@divistant/circca-react';Props · SegmentedControl
Dibangun di atas Radix RadioGroup (role="radiogroup"); menerima props Root-nya kecuali orientation.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | string | — | Segmen terpilih (terkendali). |
| defaultValue | string | — | Segmen terpilih awal (tak terkendali). |
| onValueChange | (value: string) => void | — | Dipanggil saat segmen lain dipilih (klik, panah, atau Spasi). |
| size | 'sm' | 'md' | 'md' | Trek 24 / 28; segmen 20 / 24. |
| items | { value: string; label: ReactNode; disabled?: boolean }[] | — | Pintasan daftar segmen, alternatif dari children `<SegmentedControl.Item>`. |
| disabled | boolean | false | Nonaktifkan seluruh kontrol. |
| aria-label | string | — | Nama grup — wajib bila tidak ada label terlihat: "Tampilan pipeline", "Periode laporan". |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · SegmentedControl.Item
Juga diekspor sebagai SegmentedControlItem. Lebar mengikuti label (min. 60), teks rata tengah.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | string | — | Nilai unik segmen. |
| children | ReactNode | — | Label satu-dua kata. |
| disabled | boolean | false | Segmen nonaktif (opasitas 45%), dilewati navigasi panah. |
Sumber
Kode komponen ada di packages/react/src/components/segmented-control. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.