SegmentedControl

Satu pilihan dari beberapa yang setara, dalam satu bidang: periode laporan, bentuk tampilan, atau saringan status.

Dasar

Berikan pilihannya dan v-model. Penandanya bergeser ke segmen yang dipilih, dan panah kiri/kanan memindahkan sekaligus memilih — sama seperti kelompok radio.

Ini bukanTabs. Tabs berganti panel di halaman yang sama; SegmentedControl mengubah sebuah nilai — periode, urutan, bentuk tampilan — dan isi halamannya yang menyesuaikan.

Periode: minggu

Ikon dan lebar penuh

iconOnly untuk toolbar yang sempit, dan block untuk membagi lebar rata di layar HP. Segmen ikon tetap punya nama yang dibacakan.

Tampilan: tabel

API

Props

Prop	Tipe	Default	Keterangan
items	W4cSegmentedControlItem[]	[]	Pilihannya, dalam urutan tampilnya.
v-model	string \| number	—	Pilihan yang sedang aktif. Tanpa nilai yang cocok, tidak ada segmen yang ditandai.
size	'sm' \| 'md'	'md'	Tinggi 28px atau 34px, sejajar dengan tombol seukurannya.
color	'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'	'primary'	Nada teks segmen yang aktif.
block	boolean	false	Melebar penuh dan membagi lebar rata — untuk toolbar di layar HP.
iconOnly	boolean	false	Hanya ikon. Nama tiap segmen tetap dibacakan dari label atau ariaLabel.
disabled	boolean	false	Mematikan seluruh kelompok.
label	string	'Pilihan'	Nama kelompoknya, dibacakan sebelum segmen-segmennya.

W4cSegmentedControlItem

Field	Tipe	Default	Keterangan
value	string \| number	—	Nilai yang dibawa v-model.
label	string	—	Teks segmen.
icon	string	—	Nama ikon Iconify sebelum teksnya.
ariaLabel	string	—	Nama aksesibel untuk mode iconOnly, bila label tidak cukup menjelaskan.
disabled	boolean	false	Segmen tetap terlihat tetapi dilewati panah dan klik.

Slots

Slot	Tipe	Default	Keterangan
item	{ item, index, active }	—	Mengganti isi satu segmen, misalnya dengan badge jumlah.

Event change hanya dikirim saat pilihannya benar-benar berganti. Strukturnya role="radiogroup" dengan role="radio" di dalamnya: satu perhentian Tab untuk seluruh kelompok, lalu panah untuk memilih.

Untuk pilihan yang panjang atau butuh penjelasan per opsi, pakai FormRadioGroup; untuk satu pengaturan hidup-mati, pakai FormSwitch.