RadioGroup

Status: stableAccessibility reviewedtenet-ui@0.4.0

Import

import { RadioGroup } from 'tenet-ui';

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

Source: src/components/Radio/Radio.tsx

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	—	Shared form field name. Auto-generated if omitted.
label *	ReactNode	—	Group label (rendered as a fieldset legend).
caption	ReactNode	—	Optional helper text for the whole group.
value	string	—	Controlled selected value.
defaultValue	string	—	Uncontrolled initial selected value.
onChange	(value: string) => void	—	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	—	Radio children.

* required

Radio

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

* required

Related components

• Checkbox
• Switch
• Select
• FormControl