Radio

A radio group component for selecting a single option from a list of options.
1<Radio.Group defaultValue="2">
2  <Flex gap="small" align="center">
3    <Radio value="1" id="P1" />
4    <label htmlFor="P1">Option One</label>
5  </Flex>
6  <Flex gap="small" align="center">
7    <Radio value="2" id="P2" />
8    <label htmlFor="P2">Option Two</label>
9  </Flex>
10  <Flex gap="small" align="center">
11    <Radio value="3" id="P3" disabled />
12    <label htmlFor="P3">Option Three</label>
13  </Flex>
14</Radio.Group>

Anatomy

Import and assemble the component:

1import { Radio } from "@raystack/apsara";
2

3<Radio.Group>
4  <Radio />
5  <Radio />
6</Radio.Group>

API Reference

Group

Groups radio buttons and manages their shared state.

Prop

Type

Root

Renders an individual radio button.

Prop

Type

Examples

State

Radio buttons support different states to indicate interactivity and selection.

1<Radio.Group defaultValue="1">
2  <Flex gap="small" align="center">
3    <Radio value="1" id="d1" />
4    <label htmlFor="d1">Default Option</label>
5  </Flex>
6</Radio.Group>

Size Variants

The Radio component comes in two sizes: large (default) and small.

1<Radio.Group defaultValue="1">
2  <Flex gap="small" align="center">
3    <Radio value="1" size="large" id="sl1" />
4    <label htmlFor="sl1">Large Option One</label>
5  </Flex>
6  <Flex gap="small" align="center">
7    <Radio value="2" size="large" id="sl2" />
8    <label htmlFor="sl2">Large Option Two</label>
9  </Flex>
10</Radio.Group>

Orientation

The Radio.Group supports vertical (default) and horizontal orientation to control the layout direction of its items.

1<Radio.Group defaultValue="1" orientation="vertical">
2  <Flex gap="small" align="center">
3    <Radio value="1" id="ov1" />
4    <label htmlFor="ov1">Option One</label>
5  </Flex>
6  <Flex gap="small" align="center">
7    <Radio value="2" id="ov2" />
8    <label htmlFor="ov2">Option Two</label>
9  </Flex>
10  <Flex gap="small" align="center">
11    <Radio value="3" id="ov3" />
12    <label htmlFor="ov3">Option Three</label>
13  </Flex>
14</Radio.Group>

With Labels

Radio buttons should always be accompanied by labels for accessibility and usability.

1<Radio.Group defaultValue="1">
2  <Flex gap="small" align="center">
3    <Radio value="1" id="L1" />
4    <label htmlFor="L1">Option One</label>
5  </Flex>
6  <Flex gap="small" align="center">
7    <Radio value="2" id="L2" />
8    <label htmlFor="L2">Option Two</label>
9  </Flex>
10  <Flex gap="small" align="center">
11    <Radio value="3" id="L3" />
12    <label htmlFor="L3">Option Three</label>
13  </Flex>
14</Radio.Group>

Form Example

Radio buttons can be used in forms with proper validation and submission handling.

1<form
2  onSubmit={(e) => {
3    e.preventDefault();
4    const formData = new FormData(e.target);
5    alert(JSON.stringify(Object.fromEntries(formData)));
6  }}
7>
8  <Flex direction="column" gap="medium">
9    <Radio.Group name="plan" defaultValue="monthly">
10      <Flex gap="small" align="center">
11        <Radio value="monthly" id="mp" />
12        <label htmlFor="mp">Monthly Plan</label>
13      </Flex>
14      <Flex gap="small" align="center">
15        <Radio value="yearly" id="yp" />

Accessibility

  • Follows the WAI-ARIA Radio Group pattern
  • Supports keyboard navigation with arrow keys within the group
  • Uses role="radiogroup" for the group and role="radio" for items
  • Selected state is communicated via aria-checked