Radio

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.

How to Use Radio

You’ll find Radio under Forms in the Components list.

1. Place Radio inside a Form.
2. Enter a shared Name for the group.
3. Add items to the Options collection.
4. Give every option a visible Label and submitted Value.
5. Enable Required when the visitor must make a choice.
6. Style checked, unchecked, label, and focus states.

Component Settings

Settings

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.

Radio

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.

Options

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

Label colours default to Surface 50 when Unchecked and Brand 500 when Checked.

Font defaults to Body and Size to Base.

Outline

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.

Sizing and Spacing

Radio Size defaults to theme spacing 4.

Option Gap defaults to theme spacing 4.

Accessibility

Use a clear question or group description before the options and concise labels for each choice. Keep a visible keyboard-focus outline.

Related Components

• Checkbox — Allows several independent choices.
• Select — Presents one choice in a compact drop-down.
• Form — Configures delivery and validation.

Common Control	Description
Link	Link to a page, resource, anchor, email address, or website.
Layout	Control positioning, stacking, visibility, overflow, and isolation.
Sizing	Set width, height, and responsive size constraints.
Spacing	Add responsive margin and padding.
Typography & Text Styles	Control fonts, text spacing, decoration, colour, and semantic wrappers.
Backgrounds	Apply colour, image, gradient, SVG, video, and hover backgrounds.
Transitions	Choose what animates and set its timing curve, duration, and delay.
Effects	Apply shadows, opacity, and hover effects.
Filters	Apply blur, brightness, saturation, shadow, and backdrop effects.
Transforms	Scale, rotate, move, and skew components.
Borders	Set border style, colour, opacity, width, radius, and hover states.
Advanced	Add CSS classes and IDs, or change supported HTML tags.