Form

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Overview

The RadioSelect component lets users choose exactly one option from a list. It supports vertical and horizontal layouts and fits forms for shipping, payment, or any single-choice question.

Key Business & UX Benefits

Ensures only one option is selected for single-choice questions.
Vertical and horizontal layouts fit different space and content.
Accessible grouping and keyboard support for all options.
Fits shipping, payment, and preference forms.

Pro-Tip from Larry: Use RadioSelect when the user must pick exactly one option from a known set.

Usage

Radioselect Vertical

Radioselect Horizontal

Feature List

Single selection from a list of options
Vertical and horizontal layout variants
Accessible grouping and keyboard navigation
Integration with form and v-model

API Reference

Radioselect

Prop	Default	Type
`orientation`	`vertical`	`"horizontal" \| "vertical"`
`modelValue`		`string`
`defaultValue`		`string`
`disabled`	`false`	`boolean`
`name`		`string`
`required`	`false`	`boolean`
`variant`	`default`	`"default" \| "boxed"`

Slot	Type
`default`	`{}`

Event	Type
`update:modelValue`	`(event: "update:modelValue", value: string \| undefined): void`

RadioselectItem

Prop	Default	Type
`value`required		`string`
`label`		`string`
`id`		`string`
`disabled`	`false`	`boolean`
`required`	`false`	`boolean`
`variant`	`default`	`"default" \| "boxed"`
`icon`		`string`

Slot	Type
`default`	`{}`

Edit this pageorReport an issue

Quantity Picker

A stepper input for selecting product quantities with increment/decrement buttons, direct input, and stock validation.

Select

A dropdown select component for choosing a single option from a list.