humanonlyweb/ui

Radio Group

A single choice from a list.

Markdown

Examples

Basic

Plan

You can change it any time.

Copy code

Horizontal

Size
Copy code

Custom options

The option slot replaces each radio's content. Include radio-control to keep the circle.

Plan
Copy code

API

PropTypeDefault
options

Radios to render, in order.

SelectOption<T>[][]
label

Visible group label, which names the radiogroup.

string—
hint

Help text under the control, announced as its description.

string—
error

true marks the control invalid; a string also shows it as the message, replacing the hint.

string | boolean—
disabled

Disables the control.

booleanfalse
orientation

Layout hook, exposed as data-orientation and aria-orientation.

"horizontal" | "vertical""vertical"
name

Form field name: submits the value with a native form, via hidden inputs.

string—
id

Id for the control; generated with useId() when omitted.

string—
modelValue

The selected value.

T—
EventPayload
update:modelValue

v-model:modelValue update.

[value: T | undefined]
SlotProps
option

Radio content, replacing the control and label.

{ option: SelectOption<T>; checked: boolean; }

Types

export interface SelectOption<T extends SelectValue = SelectValue> {
  label: string;
  value: T;
  disabled?: boolean;
}

export type SelectValue = string | number;
Copy code

Styling

Parts
fieldfield-labelradio-groupradioradio-controlradio-labelfield-message
States
data-field-errordata-field-namedata-orientationdata-radio-checkeddata-field-tone

Keyboard

KeysAction
TabFocus the selected radio
Arrow keysSelect the next / previous radio, wrapping
Home / EndSelect the first / last radio

Accessibility

  • In right-to-left layouts, ← / → follow the visual direction.