Radio Group
Single-select option group with optional hint text per option, disabled options, horizontal/vertical orientation, and two size variants.
import
{ RadioGroup } from "@pepulux/ui"Vertical (default) — with hints
Selected: pro
Horizontal orientation
Side-by-side layout — best for 2–4 short labels.
Sizes — sm / md
sm uses a 16px dot, md uses a 20px dot.
Disabled options
Individual options within the group can be disabled.
No label (fieldset without legend)
Omit the label prop when the context already makes the group purpose clear.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options* | RadioOption[] | — | Array of { value, label, hint?, disabled? } |
| value | string | — | Controlled selected value |
| onChange | (value: string) => void | — | Called when selection changes |
| name | string | "radio" | HTML name attribute for the radio inputs |
| label | string | — | Group legend text displayed above the options |
| orientation | "vertical" | "horizontal" | "vertical" | Layout direction |
| size | "sm" | "md" | "md" | Radio dot dimension — 16px (sm) or 20px (md) |
| className | string | — | Additional CSS classes on the fieldset wrapper |