Lucent UI
← CheckboxRadioToggle →
✦ LLM-ready

Radio

atom

Radio button used inside a RadioGroup for mutually exclusive selection. Supports vertical and horizontal orientation, three sizes (sm/md/lg), a group-level disabled state, and a contained prop for border-strong card-style options with neutral checked fill and helperText.

"Add a RadioGroup from lucent-ui with three plan options (Free, Pro, Enterprise). Make it controlled and show the selected value below."

Usage

React / JSX
import { Radio, RadioGroup } from 'lucent-ui'

<Radio orientation="vertical" size="md">Radio</Radio>

Installation

pnpm add lucent-ui

API Reference

Radio props — * required

PropTypeDefaultDescription
name*string—Shared name attribute for the radio group.
value*string—Controlled selected value.
onChange*(value: string) => void—Called when the selection changes.
orientation"vertical" | "horizontal""vertical"Layout direction.
size"sm" | "md" | "lg""md"Radio button size.
containedbooleanfalseWraps each radio in a bordered container with padding.
disabledbooleanfalseDisables all radio buttons in the group.
children*React.ReactNode—Radio components.