Radio

Radio with spring-scale inner dot animation. Use RadioGroup for mutually exclusive selection.

Basic Usage

import { Radio, RadioGroup } from '@airo-ui/react'
import { useState } from 'react'

function Demo() {
  const [value, setValue] = useState('opt-2')

  return (
    <div>
      <RadioGroup value={value} onChange={setValue}>
        <Radio value="opt-1" label="Option 1" />
        <Radio value="opt-2" label="Option 2" />
        <Radio value="opt-3" label="Option 3" />
      </RadioGroup>
      <p style={{ marginTop: 8, fontSize: 13, color: 'var(--color-neutral-500)' }}>
        Selected: {value}
      </p>
    </div>
  )
}

Disabled

<RadioGroup value="opt-1">
  <Radio value="opt-1" label="Enabled" />
  <Radio value="opt-2" label="Disabled" disabled />
</RadioGroup>

API

Radio Props

Name	Type	Default	Description
value	string | number | boolean	Required	The option's value
checked	boolean	--	Controlled checked state
defaultChecked	boolean	false	Default checked state (uncontrolled)
label	string	--	Label text
name	string	--	Native name (can omit inside Group)
disabled	boolean	false	Disabled
children	React.ReactNode	--	Custom label content
onChange	(value: RadioValue) => void	--	Selection change handler

RadioGroup Props

Name	Type	Default	Description
value	string | number | boolean	--	Currently selected value
defaultValue	string | number | boolean	--	Default selected value
name	string	--	Group name, auto-passed to children
disabled	boolean	false	Disable entire group
children	React.ReactNode	--	Radio items
onChange	(value: RadioValue) => void	--	Value change handler