Grup radio

Radio dipakai untuk memilih tepat satu opsi dari kumpulan kecil yang terlihat. radio() merender satu; choiceGroup() membangun seluruh kumpulannya dari sebuah larik dan memberinya legenda serta role="radiogroup" yang menjadikannya sebuah grup alih-alih tumpukan masukan.

Mereka berbagi satu name, jadi peramban menangani sifat saling meniadakan dan navigasi tombol panah di antaranya. Tidak ada di sini yang mengirim skrip.

Grup radio dasar

Paket
choiceGroup({
  legend: 'Paket',
  name: 'plan',
  value: 'pro',
  options: [
    { value: 'free', label: 'Gratis' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Tim' },
  ],
})

Dalam satu baris

Label pendek lebih enak dibaca dalam satu baris. Yang panjang sebaiknya tetap menumpuk, dan itulah bawaannya.

Bentuk perangkat
choiceGroup({
  legend: 'Bentuk perangkat',
  name: 'form-factor',
  direction: 'row',
  value: 'desktop',
  options: ['desktop', 'mobile'],
})

String biasa

Ketika nilainya dan labelnya sama, berikan string.

Tingkat log
choiceGroup({
  legend: 'Tingkat log',
  name: 'log-level',
  direction: 'row',
  value: 'warn',
  options: ['info', 'warn', 'error', 'silent'],
})

Opsi yang dinonaktifkan

Perender
SSR penuh butuh host Node, yang tidak dimiliki proyek ini.
choiceGroup({
  legend: 'Perender',
  name: 'renderer',
  value: 'static',
  options: [
    { value: 'static', label: 'Statis' },
    { value: 'islands', label: 'Island server' },
    { value: 'ssr', label: 'SSR penuh', disabled: true },
  ],
  help: 'SSR penuh butuh host Node, yang tidak dimiliki proyek ini.',
})

Satu per satu

Pakai radio() langsung ketika opsinya tidak cukup seragam untuk datang dari sebuah larik — misalnya ketika masing-masing membawa deskripsinya sendiri.

stack({ gap: 'md' },
  radio({ name: 'deploy', value: 'push', label: 'Pada setiap pengiriman', checked: true }),
  radio({ name: 'deploy', value: 'tag', label: 'Hanya pada rilis bertanda' }),
  radio({ name: 'deploy', value: 'manual', label: 'Secara manual' }),
)

Warna

stack({ direction: 'row', gap: 'lg', wrap: true },
  radio({ label: 'Primary', name: 'c1', checked: true, color: 'primary' }),
  radio({ label: 'Neutral', name: 'c2', checked: true, color: 'neutral' }),
  radio({ label: 'Success', name: 'c3', checked: true, color: 'success' }),
  radio({ label: 'Warning', name: 'c4', checked: true, color: 'warning' }),
  radio({ label: 'Danger', name: 'c5', checked: true, color: 'danger' }),
)

Di dalam kartu

Pengaturan build

Diterapkan pada penerapan berikutnya

URL bersih
Gambar
card(
  cardHeader({ title: 'Pengaturan build', subtitle: 'Diterapkan pada penerapan berikutnya' }),
  cardBody(
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'URL bersih',
        name: 'clean-urls',
        direction: 'row',
        value: 'on',
        options: [
          { value: 'on', label: 'Nyala' },
          { value: 'off', label: 'Mati' },
        ],
      }),
      choiceGroup({
        legend: 'Gambar',
        name: 'images',
        value: 'optimise',
        options: [
          { value: 'optimise', label: 'Ubah ukuran dan konversi' },
          { value: 'copy', label: 'Salin apa adanya' },
        ],
      }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Simpan'),
  ),
)

Props

choiceGroup():

PropTipeBawaanDeskripsi
legendChild—Label untuk keseluruhan grupnya.
namestring—Nama formulir bersama — yang membuat radionya saling meniadakan.
optionsArray[]String, atau objek { value, label, disabled }.
valuestring | number | Array—Opsi mana yang tercentang. Sebuah larik untuk kotak centang.
type'radio' | 'checkbox''radio'Kendali mana yang dibangun. Sekaligus memilih peran grupnya.
direction'row' | 'column''column'Bagaimana opsinya ditata.
helpChild—Petunjuk di bawah grupnya.

radio() menerima props yang sama dengan checkbox(): label, color, checked, name, value, dan disabled.