Radio

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

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>

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 direction="column" gap="small">
11        <Flex gap="small" align="center">
12          <Radio value="monthly" id="mp" />
13          <label htmlFor="mp">Monthly Plan</label>
14        </Flex>
15        <Flex gap="small" align="center">

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