Radio Group
premiumRadio button group with configurable options and layout.
Overview
The Radio Group lets users select one option from a list. Supports horizontal and vertical layouts, custom option styling, and prefix/suffix text for each option.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "choice" | Field name used in form data. |
label | String | "Choose one" | Label displayed above the radio group. |
options | Array | -- | List of options with label, value, prefix, and suffix. |
required | Boolean | false | Whether a selection must be made. |
layout | Enum | "vertical" | Stack options vertically or horizontally. |
Features
- Horizontal or vertical layout
- Custom radio indicator styling (size, colors, border)
- Option prefix and suffix text
- Container styling for each option (background, border, padding)
- Separate checked/unchecked styles
- Uses native <input type="radio"> for accessibility
Tips
Use horizontal layout for 2-3 short options, vertical for longer lists.
Prefix/suffix text is useful for adding context (e.g., price next to a plan name).
Validation
This component uses select validation. See the Validation Guide for details on configuring rules and error messages.