Radio

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

Import

tsx

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

Playground

Interactively configure the Radio group props below.

React

Vue

Angular

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.

React

Vue

Angular

tsx

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

Controlled

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

tsx

const [value, setValue] = React.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 A

Option B (disabled)

tsx

<RadioGroup defaultValue="a">
  <Radio radioValue="a" label="Option A" />
  <Radio radioValue="b" label="Option B (disabled)" 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.
style	ViewStyle	-	Additional styles applied to the group container.

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.
disabled	boolean	false	Disables this radio item when true.
filled	boolean	false	Adds a tinted background and padding to the radio wrapper.
style	ViewStyle	-	Additional styles applied to the radio wrapper.