Radio

SRadioGroup is a group of radio buttons built on Reka UI (the radiogroup/radio roles, arrow key navigation). The group composes SRadio — a single option that reuses SLabel. Options are set with the options prop or with SRadio in the slot.

With options

Horizontal, with a slot

Disabled group

The disabled prop on SRadioGroup disables all options at once.

Required choice

The required prop makes a choice in the group required for form submission.

Color

The color prop on SRadio sets the color of the checked state from the palette.

Label, hint and error

label renders the group title and links it with aria-labelledby (a native <label for> does not work with a role="radiogroup" container — it has no value of its own). hint and error go below the group. No separate SFormField wrapper is needed for this; aria-label remains for cases without a visible title.

Choice card

SRadio can be built into a card where a click anywhere on the row selects the option. stretch stretches the radio button to the container width and gives the free space to the label, align="center" centers the circle against a multi-line label instead of the first line. The same props exist on SCheckbox.

Classes and attributes of SRadioGroup go to the field wrapper together with the title and hint. The layout of the options themselves is set with group-class — the class of the .s-radio-group container. The gap between options is the --s-radio-group-gap variable.

API

SRadio is a group option (reused inside SRadioGroup):

Props

Name	Type	Default	Description
value*	string	required	Value set on the group when this option is selected.
color	string	undefined	Accent color (checked state): a name from the palette (primary/teal/teal-10).
label	string	undefined	Label text next to the radio (can be replaced with the default slot).
disabled	boolean	undefined	Disables only this option.
align	"start" | "center"	"start"	Vertical alignment of the dot relative to the label: start aligns it with the first line, center with the middle of a multi-line label.
stretch	boolean	undefined	Stretches the radio to the container width, with the label taking the free space. A click anywhere on the row selects the option, which turns the component into a choice card.
id	string	undefined	Element id. Generated automatically when not set (SSR-safe).

Slots

Name	Description
default	Label text (alternative to the label prop).

The group:

Props

Name	Type	Default	Description
options	{ label: string; value: string; disabled?: boolean }[]	undefined	List of options. Alternatively, pass SRadio items in the default slot.
label	string	undefined	Group title. Linked to the group via aria-labelledby.
hint	string	undefined	Hint below the group.
error	string	undefined	Error message below the group. When set, the group is marked invalid.
invalid	boolean	undefined	Marks the group invalid explicitly (in addition to error).
id	string	undefined	Group id. Generated automatically (SSR-safe) when not set.
orientation	"vertical" | "horizontal"	"vertical"	Layout orientation: vertical (default) or horizontal.
group-class	| null | string | false | Record	undefined	Class of the options container (.s-radio-group). The component's own classes and attributes go to the field wrapper along with the title and hint, while the options layout lives here.
disabled	boolean	undefined	Disables the whole group.
required	boolean	undefined	Selection is required for form submission.
aria-label	string	undefined	Accessible name of the group when there is no visible label.
model-value	string	undefined	Selected value of the group. Two-way binding via v-model.

Events

Name	Signature	Description
update:modelValue	(value: string | undefined) => void	Emitted when modelValue changes. Used for two-way binding (v-model).

Slots

Name	Description
default	Custom set of SRadio items (instead of the options prop).
label	Group title as markup, when a string label is not enough.