Radio Group

Stable

A set of checkable buttons where only one can be checked at a time.

Examples

Basic Usage

Density

Default

Comfortable

Compact

tsx

<RadioGroup defaultValue="comfortable" label="Density">
  <Radio radioValue="default" label="Default" />
  <Radio radioValue="comfortable" label="Comfortable" />
  <Radio radioValue="compact" label="Compact" />
</RadioGroup>

Neon Variant & Descriptions

Select Node

US EastLow latency route.

EU WestStrict privacy laws.

tsx

<RadioGroup defaultValue="server1" label="Select Node">
  <Radio variant="neon" radioValue="server1" label="US East" description="Low latency route." />
  <Radio variant="neon" radioValue="server2" label="EU West" description="Strict privacy laws." />
</RadioGroup>

Horizontal Orientation

Option A

Option B

Option C

tsx

<RadioGroup orientation="horizontal" defaultValue="a">
  <Radio radioValue="a" label="Option A" />
  <Radio radioValue="b" label="Option B" />
  <Radio radioValue="c" label="Option C" />
</RadioGroup>

API Reference