RadioGroup

When to use

Use RadioGroup when two to about seven options exclude each other and all of them must stay visible: delivery method, display preference, frequency.

When not to use

• For several choices: Use a CheckboxGroup.
• For long lists: Over seven options, use a Select.
• For a view choice that takes effect at once: Use a ToggleGroup.

Anatomy

Group label

First optionOption description goes here.

Second optionOption description goes here.

LightDark

Copy code

import { Radio, RadioGroup } from '@bigbang/ui';

export default function WithDescriptions() {
  return (
    <RadioGroup label="Group label" defaultValue="one">
      <Radio value="one" label="First option" description="Option description goes here." />
      <Radio value="two" label="Second option" description="Option description goes here." />
    </RadioGroup>
  );
}

1. Legend: <legend>; label-md, with the necessity marker when needed.
2. Circle: 16 px (radio-size), fully round.
3. Dot: 6 px on the selected item, 3/8 of the circle.
4. Label and description: a body-md label, a body-sm description.
5. Error: error; under the items.

Behaviour

• Selecting an item clears the previous choice; the choice changes only by selecting another item.
• Clicking the label selects the item too.
• The selected value is submitted with the form under name.
• error makes the group and every item invalid.

Guidelines

• Order the options meaningfully; put the most likely one first.
• Preselect an option when the user may go on without choosing.
• When a choice must be undone, add an explicit option such as “None”.

Content

• The legend is a short noun phrase or a question.
• Labels share the same grammatical form and have no full stop.

Turkish	English
Bir seçenek seçin.	Choose one option.
Devam etmek için bir seçenek seçin.	Choose an option to continue.

Related components

• CheckboxGroup: several choices.
• Select: one choice from a long list.
• ToggleGroup: one choice that takes effect at once.