Radio

Name: Rad UI
Author: Rad UI Team

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

Free

Pro

Enterprise

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

API Documentation

Anatomy

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" />
}

Radio

A single radio button input.

Prop	Type	Default
name	string	""
value	string	""
id	string	""
checked	boolean	false
disabled	boolean	false
size	string	""
color	string	""
variant	string	""
onChange	function	--