Radio
A single radio option used standalone or as part of a group sharing the same model-value. Sizes, color variants, optional description, and slot-overridable label and description text. Toggle Vue / CSS to switch the live demo and source together.
Basic
Single radio option with a label.
Vue SFC
Group
Multiple radios sharing one model-value.
Vue SFC
Sizes
Small, medium and large.
Vue SFC
Colors
All built-in color variants.
Vue SFC
States
Disabled and pre-selected.
Vue SFC
Description
Radio with a secondary description line.
Vue SFC
Slots
Custom label and description via named slots.
Vue SFC
Event: change
Listen to mno-change to react to selection.
Vue SFC
Event log
Live log of mno-change events.
Vue SFC
Customized
Override per-element styling with cssClass (Vue) or utility classes (CSS).
Vue SFC
Card recipe
Compose a card-style radio with your own CSS — the library ships no helper.
Vue SFC
Types
Import
import { RadioProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
value | null | string | number | boolean | '' | The value this radio represents within its group. |
modelValue | null | string | number | boolean | '' | The currently selected value of the radio group. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color theme applied to the radio. |
size | 'sm' | 'md' | 'lg' | 'md' | Visual size of the radio. |
disabled | boolean | false | Disables the radio, preventing selection. |
label | string | '' | Text label shown beside the radio. |
description | string | '' | Secondary description text shown below the label. |
cssClass | RadioCssClass | {} | Custom CSS classes applied to internal radio parts. |
ariaLabelText | string | — | Accessible label used when no visible label is present. |
ariaLabel | string | — | — |