| description | Let visitors choose one option from a group |
|---|
Radio creates a set of mutually exclusive choices. Selecting one option automatically clears the other option in the same group.
You’ll find Radio under Forms in the Components list.
- Place Radio inside a Form.
- Enter a shared Name for the group.
- Add items to the Options collection.
- Give every option a visible Label and submitted Value.
- Enable Required when the visitor must make a choice.
- Style checked, unchecked, label, and focus states.
Required is off by default.
Name is blank by default. Every option uses this Name so the browser treats them as one group.
Alignment arranges options Horizontally or Vertically and defaults to Vertical.
Use State to edit Unchecked and Checked appearance. It defaults to Unchecked.
- Unchecked — Border Surface 900; Background Surface 50.
- Checked — Border Brand 500; Background Brand 500.
Border Width and Border Radius use Theme Studio controls.
The Options collection adds, removes, and reorders choices. Each item contains:
- Label — Text shown to the visitor. Blank by default.
- Value — Value included in the submission. Blank by default.
Label colours default to Surface 50 when Unchecked and Brand 500 when Checked.
Font defaults to Body and Size to Base.
Type defaults to None and can be Static or Focus. Focus provides Unfocused and Focused states.
Outline defaults are Solid style, Surface 500 colour, 100% opacity, width 1, and offset 0.
Radio Size defaults to theme spacing 4.
Option Gap defaults to theme spacing 4.
Use a clear question or group description before the options and concise labels for each choice. Keep a visible keyboard-focus outline.
- Checkbox — Allows several independent choices.
- Select — Presents one choice in a compact drop-down.
- Form — Configures delivery and validation.
{% include "../../../.gitbook/includes/common-controls.md" %}