ORadio

ORadio renders one native radio option in a controlled group.

Usage

Step by step

1. Import ORadio from the ooko-ui/radio public subpath.
2. Bind one value with v-model and use the same name for every option in the group.
3. Give each option a distinct value and its own visible label.

Example

The rendered example and its source come from the same Vue single-file component.

Monthly

Yearly

Interactive playground

Change the selected value, label, guidance, size, and radio states. The preview updates immediately.

Monthly

Cancel any time.

Yearly

Size smmdSelected MonthlyYearlyLabel Hint Error Disabled Read-only Required Hide label

Props

Prop	Type	Default	Description
modelValue	Value	undefined	Current selected value for the native radio group.
value	Value	undefined	Value represented by this radio.
size	OokoFormControlSize	undefined	Controls the choice control's form-control scale.
label	string	undefined	Visible or visually hidden accessible label.
id	string	undefined	Native input identifier. A hydration-safe identifier is generated when omitted.
name	string	undefined	Native form field name and OForm validation key.
hint	string	undefined	Persistent guidance displayed below the choice control.
error	string	undefined	Controlled validation error displayed below the choice control.
validation	OokoValidationBinding	undefined	Validation binding created by useOokoValidation.
hideLabel	boolean	false	Visually hides the label while preserving its accessible name.
required	boolean	false	Marks the native input as required.
disabled	boolean	false	Disables the native input.
readonly	boolean	false	Prevents changes while keeping the input focusable.

Events

Event	Payload	Description
update:modelValue	Value	Emits this radio's value after a native selection change.

Slots

Slot	Props	Description
default	none	Provides the radio label content.

Related types

Type	Definition
ORadioValue	type ORadioValue = number | string;
OokoFormControlSize	type OokoFormControlSize = "sm" | "md";

CSS custom properties

Custom property	Default	Description
--o-radio-gap	var(--o-space-2)	Sets the space between the radio indicator and its label.
--o-radio-indicator-size	var(--o-space-5)	Sets the radio indicator size.
--o-radio-focus-width	0.1875rem	Sets the focus outline width.
--o-radio-focus-style	solid	Sets the focus outline style.
--o-radio-focus-offset	0.125rem	Sets the distance between the indicator and focus outline.
--o-radio-disabled-opacity	0.5	Sets the opacity of a disabled radio.

Override example

:root {
  --o-radio-indicator-size: var(--o-space-6);
}

Accessibility

Each option uses a native radio and a control row that acts as its label, so clicking its indicator or text selects it. For radios sharing a name, Tab enters the group once and the arrow keys move the selection between options, matching browser and assistive-technology conventions. Focus is visible, and disabled behavior uses the native attribute. readonly remains focusable and exposes aria-readonly while preventing selection changes. Hints and errors are connected to the input, with polite error announcements. Forced-colors and reduced-motion preferences are respected.

Behavior and edge cases

Every radio requires a value; it emits that value after selection. Use one v-model and the same name for all options in a group. Native attributes and listeners are forwarded to the input; consumer classes and styles apply to the component root. size accepts sm and md, and may be configured through app defaults.