Photonix

Radio

Allows users to select one option from a set.

Preview

Usage
"use client";

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

export default function RadioPreviewExample() {
    return <Radio label="Automatic" defaultChecked size="medium" />;
}

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
"use client";

import { useState } from 'react';
import { Flex, Radio } from '@photonix/ultimate';

export default function RadioGroupExample() {
    const [value, setValue] = useState('option1');

    return (
        <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 the radio should manage its own initial selected state.

Uncontrolled
"use client";

import { Flex, Radio } from '@photonix/ultimate';

export default function RadioUncontrolledExample() {
    return (
        <Flex gap="xl" align="center">
            <Radio label="Default Selected" defaultChecked />
            <Radio label="Default Unselected" />
        </Flex>
    );
}

Sizes

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

Sizes
"use client";

import { Flex, Radio } from '@photonix/ultimate';

export default function RadioSizesExample() {
    return (
        <Flex gap="xl" align="center">
            <Radio size="small" label="Small" checked onChange={() => { }} />
            <Radio size="medium" label="Medium" checked onChange={() => { }} />
        </Flex>
    );
}

States

Disabled and checked states.

States
"use client";

import { Flex, Radio } from '@photonix/ultimate';

export default function RadioStatesExample() {
    return (
        <Flex gap="xl" align="center" wrap="wrap">
            <Radio label="Unchecked" checked={false} onChange={() => { }} />
            <Radio label="Checked" checked={true} onChange={() => { }} />
            <Radio label="Disabled" disabled />
            <Radio label="Disabled Checked" disabled checked />
        </Flex>
    );
}

On this page

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