Radio

A group of radio buttons allowing single selection from multiple options with full keyboard navigation.

import { Radio, T } from '@kaynora/ui'

export default function () {
  return (
    <Radio name='radio' defaultValue='option2'>
      <Radio.Item value='option1'><T>Option 1</T></Radio.Item>
      <Radio.Item value='option2'><T>Option 2</T></Radio.Item>
    </Radio>
  )
}

The arrangement prop determines whether items are laid out vertically or horizontally.

import { Radio, T } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '40px',
    }}>
      <Radio name='vertical' arrangement='vertical' defaultValue='a'>
        <Radio.Item value='a'><T>Option A</T></Radio.Item>
        <Radio.Item value='b'><T>Option B</T></Radio.Item>
      </Radio>

      <Radio name='horizontal' arrangement='horizontal' defaultValue='a'>
        <Radio.Item value='a'><T>Option A</T></Radio.Item>
        <Radio.Item value='b'><T>Option B</T></Radio.Item>
      </Radio>
    </div>
  )
}

The value and onChange props enable controlled state management.

import { Radio, T } from '@kaynora/ui'
import { useState } from 'react'

export default function () {
  const [selected, setSelected] = useState('y')

  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '20px',
      alignItems: 'center',
      width: '100%',
    }}>
      <Radio name='radioControlled' value={selected} onChange={setSelected}>
        <Radio.Item value='x'><T>Option X</T></Radio.Item>
        <Radio.Item value='y'><T>Option Y</T></Radio.Item>
      </Radio>
      <T>Selected: {selected}</T>
    </div>
  )
}

<Radio />

ReactElement<Radio.Item> | ReactElement<Radio.Item>[]

string

'vertical' | 'horizontal'

string

string

(value: string) => void

{
  root: HTMLDivElementProps
}

<Radio.Item />

ReactElement | ReactElement[]

string

boolean

{
  root: HTMLLabelElementProps
  content: HTMLDivElementProps
}