Radio Button

The Radio Button component is a reusable UI element for user interactions. It supports multiple styles, states, and sizes.

Props

Prop	Type	Default	Description
variant	string	'primary'	Visual style of the radio button. Options: primary and secondary
disabled	boolean	false	Disables interaction when true.
size	string	sm	Size of the radio button. Options: sm, md.

Example component with all props

<RadioButton variant="primary" size="md" disabled />

Variants

Primary

The primary radio button is the default style and is used for the most common actions.

<RadioButton v-model="selectedPrimary" value="option1" />

Secondary

The secondary radio button is used for secondary actions.

<RadioButton v-model="selectedSecondary" value="option2" variant="secondary" />

Disabled

The disabled radio button is used for disabled actions.

<RadioButton disabled />

Sizes

sm

The sm size is the default size and is used for most radio buttons. Setting this property is not required.

<RadioButton v-model="selectedSm" value="option1" variant="primary" size="sm" />

md

The md size provides a medium-sized radio button, which is larger than the default sm size. Use this size for emphasis or when a larger clickable area is needed.

<RadioButton v-model="selectedMd" value="option1" variant="primary" size="md" />