RadioGroup

Status

Stable

Accessibility

Reviewed

Package

tenet-ui@0.5.0

Source

Radio.tsx

Import

import { RadioGroup } from 'tenet-ui';

Also accepts every prop of Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange'>.

Usage guidelines

When to use: choosing exactly one option from a small, visible set. Always use Radio inside a RadioGroup — never a lone radio or a styled <div>.

Rules

• RadioGroup renders a <fieldset>/<legend> and shares the name + selection with its Radio children — don’t set name on each radio by hand.
• Give the group a label; give each Radio a label and a unique value. Add caption on the group or per radio for help text.
• Control with value + onChange(value), or leave uncontrolled with defaultValue.
• The dot color comes from the accent token — never hardcode it.

Do / Don’t

• ✅

  <RadioGroup label="Visibility" defaultValue="public">
    <Radio value="public" label="Public" />
    <Radio value="private" label="Private" />
  </RadioGroup>

• ❌ three <input type="radio"> with a hand-set name and separate <label>s — reinvents the group, easy to get a11y wrong.

Examples

2 stories for RadioGroup, open in Storybook

• Default components-radiogroup--default
• With Captions components-radiogroup--with-captions

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

RadioGroup

Prop	Type	Default	Description
name	string	None	Shared form field name. Auto-generated if omitted.
label *	ReactNode	None	Group label (rendered as a fieldset legend).
caption	ReactNode	None	Optional helper text for the whole group.
value	string	None	Controlled selected value.
defaultValue	string	None	Uncontrolled initial selected value.
onChange	(value: string) => void	None	Called with the newly selected value.
required	boolean	false	Mark the group required (asterisk on the legend).
disabled	boolean	false	Disable every radio in the group.
children	ReactNode	None	Radio children.

* required

Radio

Prop	Type	Default	Description
value *	string	None	The value submitted when this radio is selected (required).
label	ReactNode	None	Visible label rendered next to the control.
caption	ReactNode	None	Optional helper text under the label.

* required

Related components

• Checkbox
• Switch
• Select
• FormControl