Grup alih

Grup alih adalah sebaris pilihan yang terbaca sebagai satu kendali. Bangun dari items, dan nyatakan mana yang nyala dengan value.

Grup dasar

toggleGroup({
  label: 'Perataan teks',
  value: 'center',
  items: [
    { value: 'left', label: 'Kiri' },
    { value: 'center', label: 'Tengah' },
    { value: 'right', label: 'Kanan' },
  ],
})

String biasa

toggleGroup({ label: 'Kerapatan', value: 'nyaman', items: ['rapat', 'nyaman', 'lapang'] })

Tautan

Inilah bentuk yang biasanya diinginkan situs statis: tiap segmen adalah sebuah halaman. Item dengan href dirender sebagai jangkar dan yang aktif ditandai aria-current="page" — bukan aria-pressed, karena tautan bukanlah tombol yang Anda tekan masuk.

Dokumentasi UI Contoh

toggleGroup({
  label: 'Bagian',
  value: 'ui',
  items: [
    { value: 'docs', label: 'Dokumentasi', href: '/docs' },
    { value: 'ui', label: 'UI', href: '/ui' },
    { value: 'examples', label: 'Contoh', href: '/examples' },
  ],
})

Lebih dari satu yang nyala

Berikan sebuah larik sebagai value. Wadahnya tetap berupa group biasa — sebuah radiogroup akan salah, karena ini tombol yang ditekan, bukan radio.

toggleGroup({
  label: 'Pemformatan',
  value: ['bold', 'underline'],
  items: [
    { value: 'bold', label: 'Tebal' },
    { value: 'italic', label: 'Miring' },
    { value: 'underline', label: 'Bergaris bawah' },
  ],
})

Ukuran dan varian

stack({ gap: 'md' },
  toggleGroup({ size: 'sm', label: 'Kecil', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'md', label: 'Sedang', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'lg', label: 'Besar', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ variant: 'ghost', label: 'Ghost', value: 'b', items: ['a', 'b', 'c'] }),
)

Item yang dinonaktifkan

toggleGroup({
  label: 'Perender',
  value: 'static',
  items: [
    { value: 'static', label: 'Statis' },
    { value: 'islands', label: 'Island' },
    { value: 'ssr', label: 'SSR', disabled: true },
  ],
})

Di dalam bilah alat

stack({ direction: 'row', gap: 'md', wrap: true, align: 'center' },
  toggleGroup({ label: 'Perataan', value: 'Kiri', size: 'sm', items: ['Kiri', 'Tengah', 'Kanan'] }),
  divider({ orientation: 'vertical' }),
  toggleGroup({ label: 'Gaya', value: ['Tebal'], size: 'sm', items: ['Tebal', 'Miring'] }),
)

Kapan memakai yang lain

Jika pilihannya dikirim bersama formulir, pakai choiceGroup() — radio sungguhan, tanpa skrip. Jika tiap segmennya adalah halaman, pilih bentuk tautan di atas. Grup alih dipakai untuk pilihan yang ditindaklanjuti halamannya sendiri.

Props

Prop	Tipe	Bawaan	Deskripsi
`items`	`Array`	`[]`	String, atau objek { value, label, href, disabled }.
`value`	`string \| number \| Array`	—	Item mana yang nyala. Sebuah larik ketika beberapa bisa nyala.
`label`	`string`	—	Nama yang dapat diakses untuk grupnya.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Diterapkan ke setiap item.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Seperti apa rupa item yang mati.