Photonix

Radio

Allows users to select one option from a set.

Preview

Usage
import { Radio } from '@photonix/ultimate';

<Radio label="Selected" defaultChecked />
<Radio label="Unselected" />
<Radio label="Disabled" disabled />

Component API

Radio

Prop
Type
Default
Description
checked
boolean
-
Whether the radio is selected (controlled)
defaultChecked
boolean
false
Initial selected state when uncontrolled
size
"small" | "medium"
'medium'
Size of the radio
label
React.ReactNode
-
Label text for the radio
onChange
((checked: boolean) => void)
-
Callback when radio state changes

Variants

Radio Group

Radios are typically used in groups to allow single selection.

Radio Group
const [value, setValue] = useState('option1');

<Flex direction="column" gap="sm">
  <Radio 
    label="Option 1" 
    checked={value === 'option1'} 
    onChange={() => setValue('option1')} 
  />
  <Radio 
    label="Option 2" 
    checked={value === 'option2'} 
    onChange={() => setValue('option2')} 
  />
  <Radio 
    label="Option 3" 
    checked={value === 'option3'} 
    onChange={() => setValue('option3')} 
  />
</Flex>

Uncontrolled

Use defaultChecked when you want the radio to manage its own initial selected state.

Uncontrolled
<Radio label="Default Selected" defaultChecked />
<Radio label="Default Unselected" />

Sizes

Radios are available in small and medium (default) sizes.

Sizes
<Radio size="small" label="Small" checked />
<Radio size="medium" label="Medium" checked />

States

Disabled and checked states.

States
<Radio label="Unchecked" checked={false} />
<Radio label="Checked" checked={true} />
<Radio label="Disabled" disabled />
<Radio label="Disabled Checked" disabled checked />

On this page

Preview
Component API
Variants
Radio Group
Uncontrolled
Sizes
States
Photonix UI - React Components, Templates & Figma Design System