Grupa opcji

Opcje radio służą do wybrania dokładnie jednej możliwości z małego, widocznego zestawu. radio() renderuje jedną; choiceGroup() buduje cały zestaw z tablicy i daje mu legendę oraz role="radiogroup", które czynią z niego grupę, a nie stertę inputów.

Dzielą name, więc wzajemną wyłącznością i przechodzeniem strzałkami zajmuje się przeglądarka. Nic tu nie wysyła skryptu.

Podstawowa grupa

Plan
choiceGroup({
  legend: 'Plan',
  name: 'plan',
  value: 'pro',
  options: [
    { value: 'free', label: 'Darmowy' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Zespół' },
  ],
})

W rzędzie

Krótkie etykiety lepiej czyta się w jednej linii. Długie powinny zostać ułożone pionowo, co jest domyślne.

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

Zwykłe ciągi znaków

Gdy wartość i etykieta są takie same, podaj ciągi znaków.

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

Wyłączone opcje

Renderer
Pełny SSR wymaga hosta Node, którego ten projekt nie ma.
choiceGroup({
  legend: 'Renderer',
  name: 'renderer',
  value: 'static',
  options: [
    { value: 'static', label: 'Statyczny' },
    { value: 'islands', label: 'Wyspy serwerowe' },
    { value: 'ssr', label: 'Pełny SSR', disabled: true },
  ],
  help: 'Pełny SSR wymaga hosta Node, którego ten projekt nie ma.',
})

Po jednej

Użyj radio() wprost, gdy opcje nie są na tyle jednorodne, by pochodzić z tablicy — na przykład gdy każda niesie własny opis.

stack({ gap: 'md' },
  radio({ name: 'deploy', value: 'push', label: 'Przy każdym pushu', checked: true }),
  radio({ name: 'deploy', value: 'tag', label: 'Tylko przy wydaniach z tagiem' }),
  radio({ name: 'deploy', value: 'manual', label: 'Ręcznie' }),
)

Kolory

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' }),
)

W karcie

Ustawienia buildu

Zastosowane przy następnym wdrożeniu

Czyste URL-e
Obrazy
card(
  cardHeader({ title: 'Ustawienia buildu', subtitle: 'Zastosowane przy następnym wdrożeniu' }),
  cardBody(
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'Czyste URL-e',
        name: 'clean-urls',
        direction: 'row',
        value: 'on',
        options: [
          { value: 'on', label: 'Włączone' },
          { value: 'off', label: 'Wyłączone' },
        ],
      }),
      choiceGroup({
        legend: 'Obrazy',
        name: 'images',
        value: 'optimise',
        options: [
          { value: 'optimise', label: 'Skaluj i konwertuj' },
          { value: 'copy', label: 'Kopiuj bez zmian' },
        ],
      }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Zapisz'),
  ),
)

Propsy

choiceGroup():

PropTypDomyślnieOpis
legendChild—Etykieta całej grupy.
namestring—Wspólna nazwa formularza — to ona czyni opcje wyłącznymi.
optionsArray[]Ciągi znaków albo obiekty { value, label, disabled }.
valuestring | number | Array—Która opcja jest zaznaczona. Tablica dla pól wyboru.
type'radio' | 'checkbox''radio'Którą kontrolkę zbudować. Dobiera też rolę grupy.
direction'row' | 'column''column'Jak ułożone są opcje.
helpChild—Wskazówka pod grupą.

radio() przyjmuje te same propsy co checkbox(): label, color, checked, name, value i disabled.