Components / inputs

Radio

Selects exactly one option from a group.

import { Radio } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Radio } from '@basiiik/ui';

<Radio value="monthly" label="Monthly" />

• Example values were filled in for the required props value, label: replace them with your own.
• Use inside RadioGroup, which owns the name, the selected value (Selected On or Off) and the group label. Hover and Focused are CSS; Disabled is the disabled attribute on the radio or the group.
• Storybook: Inputs/Radio.

Props

States. Use inside RadioGroup, which owns the name, the selected value (Selected On or Off) and the group label. Hover and Focused are CSS; Disabled is the disabled attribute on the radio or the group.

Native attributes such as className, id and data-* are forwarded to the root element.

Parts

<RadioGroup label="Billing" defaultValue="monthly"><Radio value="monthly" label="Monthly" /><Radio value="yearly" label="Yearly" /></RadioGroup>

Use it when

• Choose exactly one from a short, visible list

Do not use it when

• Multiple selections (use Checkbox)
• Long lists (use Select)
• Options that each need a description or a price (use Radio Card)

Rules for agents

• Always render Radio inside RadioGroup, which provides the fieldset, the group label and the shared name
• RadioGroup props: label (required, the visible group name), name, value or defaultValue, onValueChange(value), size, orientation ('vertical' or 'horizontal'), helperText, error, disabled. Each Radio takes value (required) and label
• A group has at least two options
• Use orientation="horizontal" only for 2-3 short options
• The mark (checkmark, dot, thumb) reads color.icon.on-brand, not color.text.on-brand: graphics need 3:1, text 4.5:1, so on some brand colours the mark stays white while button text turns dark

Avoid

• A single radio button on its own (it cannot be unselected)
• Options that overlap, so more than one could be true
• Using a radio change to navigate or submit immediately
• Horizontal layout for long labels or more than 3 options

Writing the content

• The group label is a short question or noun: 'Delivery method'
• Option labels are short, parallel and do not overlap in meaning
• Order options logically: most common first, or a natural sequence
• Use sentence case

Keyboard

• Arrow keys move and select within the group
• Tab enters and leaves the group

Accessibility

• Wrap the group in <fieldset><legend> or role="radiogroup" with a label

Colour tokens it reads

Related

• Checkbox
• Select
• Radio Card

inputs 16 Figma variants Try it in the live demo