Components

Radio

Allows users to select a single option from a list. Use RadioGroup to manage a set of related radio buttons with a shared label and validation state.

Replacing soon

Option A

Option B

With an optional description

Anatomy

import {Radio, RadioGroup} from '@staffbase/design';

<Radio />
<RadioGroup />

Use RadioGroup to manage a set of related radio buttons. It renders a labelled group with optional description and error state.

Preferred contact method

Choose how you would like to be contacted.

Phone

Post

Name	Type	Description
`label`	`string`	The label displayed next to the radio button.
`name`	`string`	The HTML name attribute linking this radio to its group.
`value`	`string`	The value submitted with the form or used to identify the selected option.
`checked`	`boolean`	Controlled checked state.
`description`	`string`	Descriptive text displayed below the label.
`disabled`	`boolean`	Disables the radio option.
`onChange`	`(e: ChangeEvent<HTMLInputElement>) => void`	Called when the radio is selected.
`hasError`	`boolean`	Puts the radio into an error state.
`id`	`string`	HTML id for the input element. Defaults to the `value` prop.
`className`	`string`	CSS class applied to the container element.

Name	Type	Description
`options`	`RadioProps[]`	Array of radio options. Each entry accepts all `Radio` props.
`groupLabel`	`string`	Label for the radio group.
`groupDescription`	`string`	Descriptive text displayed below the group label.
`onChange`	`(e: ChangeEvent<HTMLInputElement>) => void`	Change handler shared by all radios in the group.
`groupErrorMessage`	`string`	Error message displayed when validation fails.
`disableAll`	`boolean`	Disables all options in the group.
`requiredLabel`	`string`	Text appended to the group label indicating the field is required, e.g. '(Required)'.
`errorAriaLive`	`offassertivepolite`	Sets the priority with which screen readers announce the error message.
`className`	`string`	CSS class applied to the group container.

Use radio buttons when users must select exactly one option from a list. For multiple selections, use Checkbox instead.
Always group related radio buttons with RadioGroup to provide a shared label and consistent error handling.
All radios within a group must share the same name attribute so the browser enforces single selection.
Use description to clarify what a specific option means without cluttering the label.
Always handle the onChange event at the group level with RadioGroup rather than on each individual Radio.