RadioA radio group component for selecting a single option from a list of options.

Install the component from your command line.

npm install @raystack/apsara

Usage

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" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Option 1</label>
    <Radio.Item value="2" id="r2" />
    <label htmlFor="r2" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Option 2</label>
  </Flex>
</Radio.Root>

Radio Props

Radio.Root Props

defaultValue: The value of the radio item that should be checked by default
value: The controlled value of the radio item that is checked
onValueChange: Event handler called when the value changes
disabled: When true, prevents user interaction with the radio group
name: The name of the radio group when submitted as a form field
required: When true, indicates that a value must be selected before the form can be submitted
orientation: The orientation of the radio group ("horizontal" | "vertical")
dir: The reading direction of the radio group
aria-label: A label for the radio group that is announced by screen readers

Radio.Item Props

value: The unique value of the radio item
disabled: When true, prevents user interaction with this radio item
required: When true, indicates that this radio item must be checked
id: The unique identifier for the radio item

States

Radio buttons support different states to indicate interactivity and selection.

With Labels

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

Form Example

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