Radio

A set of mutually exclusive options where only one can be selected at a time.

Import

tsx

import { RadioGroup, Radio } from '@tac-ui/web';

Playground

Interactively configure the Radio group props below.

ReactVueAngular

Disabled

tsx

<RadioGroup defaultValue="react">
  <Radio radioValue="react" label="React" />
  <Radio radioValue="vue" label="Vue" />
  <Radio radioValue="angular" label="Angular" />
</RadioGroup>

Default Group

RadioGroup manages selection state and provides it via context to child Radio items. Use defaultValue for uncontrolled initial selection.

ReactVueAngular

tsx

<RadioGroup defaultValue="vue">
  <Radio radioValue="react" label="React" id="radio-react" />
  <Radio radioValue="vue" label="Vue" id="radio-vue" />
  <Radio radioValue="angular" label="Angular" id="radio-angular" />
</RadioGroup>

Controlled

Use value and onValueChange on RadioGroup for controlled usage. The callback receives the radioValue string of the newly selected item.

ReactVueAngular

Selected: react

tsx

const [value, setValue] = useState('react');

<RadioGroup value={value} onValueChange={setValue}>
  <Radio radioValue="react" label="React" />
  <Radio radioValue="vue" label="Vue" />
  <Radio radioValue="angular" label="Angular" />
</RadioGroup>

Disabled

Set disabled on individual Radio items to prevent them from being selected while keeping the rest of the group interactive.

Option AOption B (disabled)

tsx

<RadioGroup defaultValue="a">
  <Radio radioValue="a" label="Option A" id="radio-a" />
  <Radio radioValue="b" label="Option B (disabled)" id="radio-b" disabled />
</RadioGroup>

API Reference

RadioGroup

Prop	Type	Default	Description
defaultValue	string	-	Default selected value for uncontrolled usage.
value	string	-	Controlled selected value.
onValueChange	(value: string) => void	-	Called when the selected radio changes.
children	React.ReactNode	-	Radio items to render inside the group.

Radio

Prop	Type	Default	Description
radioValue	string	-	The value this radio item represents; compared against RadioGroup selection.
label	string	-	Label text displayed next to the radio.
id	string	-	Unique id for the radio input element.
disabled	boolean	false	Disables this radio item when true.