pro-ui

RadioGroup

Accessible radio button group. Built on React Aria.

Import

import { RadioGroup, Radio } from '@dangbt/pro-ui'

Usage

<RadioGroup label="Plan" defaultValue="pro">
  <Radio value="free">Free</Radio>
  <Radio value="pro">Pro ($9/mo)</Radio>
  <Radio value="team">Team ($49/mo)</Radio>
</RadioGroup>

Controlled

const [plan, setPlan] = useState('pro')
 
<RadioGroup label="Plan" value={plan} onChange={setPlan}>
  <Radio value="free">Free</Radio>
  <Radio value="pro">Pro</Radio>
</RadioGroup>

Props

PropTypeDefaultDescription
labelstringGroup label
valuestringControlled value
defaultValuestringUncontrolled default
onChange(value: string) => voidCalled on selection change
isDisabledbooleanDisable all radios
orientation'horizontal' | 'vertical''vertical'Layout orientation

On this page