Radio

Radio button input with label support.

Also known as: radio button, option button, single choice

View in Storybook

When to use

• Mutually exclusive choice from 2-5 options. For more options, use Select.
• For card-style, use RadioCard. For grouped layout, use RadioGroup.

Import

import { Radio } from '@vacano/ui'

Usage

const [selected, setSelected] = useState('option1')

<Radio
  checked={selected === 'option1'}
  onChange={() => setSelected('option1')}
  label="Option 1"
  name="options"
/>
<Radio
  checked={selected === 'option2'}
  onChange={() => setSelected('option2')}
  label="Option 2"
  name="options"
/>

Variants

<Radio variant="normal" checked={true} onChange={() => {}} label="Normal" />
<Radio variant="error" checked={true} onChange={() => {}} label="Error" />

Disabled

<Radio disabled checked={true} onChange={() => {}} label="Disabled checked" />
<Radio disabled checked={false} onChange={() => {}} label="Disabled unchecked" />

Props

Prop	Type	Default	Description
checked	boolean	required	Checked state
onChange	ChangeEventHandler<HTMLInputElement>	required	Change handler
label	ReactNode	-	Label content (text or any renderable node)
variant	'normal' | 'error'	'normal'	Visual variant
disabled	boolean	false	Disable radio
name	string	-	Input name for grouping
className	string	-	CSS class name for the root element
classnames	RadioClassNames	-	Custom class names for inner elements
ref	Ref<HTMLInputElement>	-	Ref to the underlying input element
data-test-id	string	-	Test identifier attribute

All standard HTML input attributes are also supported (except type, checked, onChange, and className which are controlled by the component).

ClassNames

Key	Description
input	Hidden input element
box	Visual radio circle
dot	Selected dot indicator
label	Label text

Related

• RadioCard - Card-style radio with description
• RadioGroup - Group of radio buttons
• Checkbox - Binary on/off toggle
• Select - Dropdown selection for many options