Radio

<Radio.Root defaultValue="2">
  <Flex direction="column" gap="small">
    <Flex gap="small" align="center">
      <Radio.Item value="1" id="P1" />
      <label htmlFor="P1">Option One</label>
    </Flex>
    <Flex gap="small" align="center">
      <Radio.Item value="2" id="P2" />
      <label htmlFor="P2">Option Two</label>
    </Flex>
    <Flex gap="small" align="center">
      <Radio.Item value="3" id="P3" disabled />
      <label htmlFor="P3">Option Three</label>
    </Flex>
  </Flex>
</Radio.Root>

Usage

The Popover component provides a way to display rich content in a portal when triggered by a button. It supports accessibility features, positioning options, and customizable styling.

import { Radio } from "@raystack/apsara/v1";
 
<Radio.Root defaultValue="1" aria-label="Options">
  <Flex gap="small" align="center">
    <Radio.Item value="1" id="r1" />
    <label htmlFor="r1">Option 1</label>
    <Radio.Item value="2" id="r2" />
    <label htmlFor="r2">Option 2</label>
  </Flex>
</Radio.Root>;

Radio Props

Radio.Root Props

Prop	Type	Default
`defaultValue`	`string`	-
`value`	`string`	-
`onValueChange`	`(value: string) => void`	-
`disabled`	`boolean`	-
`name`	`string`	-
`required`	`boolean`	-
`orientation`	`"horizontal" \| "vertical"`	-
`dir`	`"ltr" \| "rtl"`	-
`ariaLabel`	`string`	-

Radio.Item Props

Prop	Type	Default
`value`	`string`	-
`disabled`	`boolean`	-
`required`	`boolean`	-
`id`	`string`	-

Examples

State

Radio buttons support different states to indicate interactivity and selection.

<Radio.Root defaultValue="1">
  <Flex gap="small" align="center">
    <Radio.Item value="1" id="d1" />
    <label htmlFor="d1">Default Option</label>
  </Flex>
</Radio.Root>

With Labels

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

<Radio.Root defaultValue="1">
  <Flex direction="column" gap="small">
    <Flex gap="small" align="center">
      <Radio.Item value="1" id="L1" />
      <label htmlFor="L1">Option One</label>
    </Flex>
    <Flex gap="small" align="center">
      <Radio.Item value="2" id="L2" />
      <label htmlFor="L2">Option Two</label>
    </Flex>
    <Flex gap="small" align="center">
      <Radio.Item value="3" id="L3" />
      <label htmlFor="L3">Option Three</label>
    </Flex>
  </Flex>
</Radio.Root>

Form Example

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

<form
  onSubmit={(e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    alert(JSON.stringify(Object.fromEntries(formData)));
  }}
>
  <Flex direction="column" gap="medium">
    <Radio.Root name="plan" defaultValue="monthly" required>
      <Flex direction="column" gap="small">
        <Flex gap="small" align="center">
          <Radio.Item value="monthly" id="mp" />
          <label htmlFor="mp">Monthly Plan</label>
        </Flex>
        <Flex gap="small" align="center">
          <Radio.Item value="yearly" id="yp" />
          <label htmlFor="yp">Yearly Plan</label>
        </Flex>
      </Flex>
    </Radio.Root>
    <Button type="submit" width="100%">
      Submit
    </Button>
  </Flex>
</form>

Radio

On this page