Components
Radio
A parts-based radio component with an options-driven group — arrow-key navigation comes native via the shared name
Installation
$npx litefy@latest add radio
$pnpm dlx litefy@latest add radio
$yarn dlx litefy@latest add radio
$bun --bun litefy@latest add radio
Usage
Basic Usage
Basic radio buttons with individual and group modes.
import { Radio } from "@/ui";export default function RadioBasicDemo() { return ( <Radio.Group name="group-example" options={[ { label: "Option 1", value: "group1" }, { label: "Option 2", value: "group2" }, { label: "Option 3", value: "group3" }, ]} /> );}Controlled Mode
Manage radio group value externally with controlled state.
Selected: option1
import { useState } from "react";import { Radio } from "@/ui";export default function RadioControlledDemo() { const [selected, setSelected] = useState("option1"); return ( <div className="space-y-4"> <Radio.Group value={selected} onValueChange={setSelected} options={[ { label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }, { label: "Option 3", value: "option3" }, ]} /> <p className="text-sm text-muted-foreground">Selected: {selected}</p> </div> );}Disabled
Shows disabled state for individual radio and radio group.
"use client";import { Radio } from "@/ui";export default function RadioDisabledDemo() { return ( <div className="flex flex-col gap-4"> <Radio.Group name="disabled-example" options={[ { label: "Option 1", value: "disabled1" }, { label: "Disabled Option 2", value: "disabled2", disabled: true }, { label: "Option 3", value: "disabled3" }, ]} /> <Radio.Group disabled defaultValue="group-disabled1" name="group-disabled-example" options={[ { label: "Group Option 1", value: "group-disabled1" }, { label: "Group Option 2", value: "group-disabled2" }, { label: "Group Option 3", value: "group-disabled3" }, ]} /> </div> );}API Reference
Radio
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The radio content |
checked | boolean | false | Controlled checked state |
defaultChecked | boolean | false | Default checked state (uncontrolled) |
onCheckedChange | (checked: boolean) => void | - | Callback when the radio is checked |
indicator | React.ReactNode | - | Custom indicator content, replacing the default dot |
classNames | { indicator?; label? } | - | Custom classes for the indicator and label |
styles | { indicator?; label? } | - | Inline styles for the indicator and label |
className | ClassNameValue | - | Custom classes, applied to the label |
...props | React.ComponentProps<"input"> | - | Supports all native input props (except type, className), such as name, value, disabled |
Composable Components
RadioRoot
The bare radio input (sr-only peer) — selection state is read from it via has-checked: / peer-checked: variants.
RadioIndicator
The circular indicator. Focus ring (has-focus-visible:) and checked border (has-checked:) are built in.
RadioLabel
The label wrapper (clicking it toggles the radio).
RadioOptionConfig
| Field | Type | Default | Description |
|---|---|---|---|
label | string | - | Option display text |
value | string | - | Unique identifier value |
disabled | boolean | false | Disable the option |
indicator | React.ReactNode | - | Custom indicator, overrides common.indicator |
classNames / styles | - | - | Per-option part styles, override common |
Radio.Group
| Prop | Type | Default | Description |
|---|---|---|---|
options | RadioOptionConfig[] | - | Options data array |
value | string | - | Controlled selected value |
defaultValue | string | - | Default selected value (uncontrolled) |
onValueChange | (value: string) => void | - | Callback when the selected value changes |
disabled | boolean | false | Disable all options |
name | string | - | Group name — also enables the native arrow-key navigation between options |
className | ClassNameValue | - | Custom class names, applied to the container |
aria-label | string | - | Accessible group label |
common | { classNames?, styles?, indicator? } | - | Common config applied to all options |