Radio Group
Option group in simple or card appearance. Figma item types: Radio button, Checkbox, Icon, Avatar and Payment icon — with Badge, supporting text, sm / md size, disabled options and single or multiple selection.
import
{ RadioGroup, PaymentIcon } 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.
Card — Radio button with badge
Card — Icon simple, Avatar and Payment icon
Card — Checkbox (multiple selection)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options* | RadioOption[] | — | { value, label, hint?, disabled?, badge?, icon?, avatar?, paymentIcon?, meta? } |
| appearance | "simple" | "card" | "simple" | Inline radios or selectable cards (Figma Radio group item) |
| indicator | "radio" | "checkbox" | "radio" | Selection control — Figma Type Radio button / Checkbox |
| multiple / values / onValuesChange | boolean / string[] / (values) => void | — | Multiple selection (checkbox indicator) |
| 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 |