Radio

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

Usage

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

Radio Props

Radio Props

Prop

Type

Radio.Item Props

Prop

Type

Examples

State

Radio buttons support different states to indicate interactivity and selection.

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

With Labels

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

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

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 name="plan" defaultValue="monthly" required>
10      <Flex direction="column" gap="small">
11        <Flex gap="small" align="center">
12          <Radio.Item value="monthly" id="mp" />
13          <label htmlFor="mp">Monthly Plan</label>
14        </Flex>
15        <Flex gap="small" align="center">
16          <Radio.Item value="yearly" id="yp" />
17          <label htmlFor="yp">Yearly Plan</label>
18        </Flex>
19      </Flex>
20    </Radio>
21    <Button type="submit" width="100%">
22      Submit
23    </Button>
24  </Flex>
25</form>