Component

A single radio button input. Use RadioGroup for grouped single-selection, or Radio standalone for custom layouts.

View component changelog
preview
React
"use client"

import Radio from "@radui/ui/Radio"

const RadioExample = () => {
    return (
        <div className="flex flex-col gap-3">
            <div className="flex items-center gap-2">
                <Radio name="plan" value="free" id="free" />
                <label htmlFor="free">Free</label>
            </div>
            <div className="flex items-center gap-2">
                <Radio name="plan" value="pro" id="pro" />
                <label htmlFor="pro">Pro</label>
            </div>
            <div className="flex items-center gap-2">
                <Radio name="plan" value="enterprise" id="enterprise" />
                <label htmlFor="enterprise">Enterprise</label>
            </div>
        </div>
    )
}

export default RadioExample

Import all parts of the component and piece them together

React
import Radio from "@radui/ui/Radio"

export default () => {
    return <Radio name="group" value="option" id="option" />
}

A single radio button input.

PropTypeDefault
name
string
""
value
string
""
id
string
""
checked
boolean
false
disabled
boolean
false
size
string
""
color
string
""
variant
string
""
onChange
function
--
ShortcutDescription
Tab

Moves focus to the radio input.

Space

Checks the radio input when it is focused.

ReferenceWhat Rad UI follows
Radio group pattern

Uses native radio semantics for the individual option. Use RadioGroup when documenting grouped roving-focus behavior.

Edit this page on GitHub →