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
With input
Each step sits directly below a mono-input of the same size, which is where a mismatch shows up first. The circle tracks the shared --theme-control-height-* token at half height — identical to mono-checkbox at every step — and the label, description and gap scale with it.
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
CSS Variables
Vue SFC
Every radio is themed through --mono-radio-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-radio> and the shadow build. The color prop sets the accent, but an explicit --mono-radio-accent override always wins. To re-skin globally, set the underlying --theme-* tokens.
| Variable | Default | Controls |
|---|---|---|
--mono-radio-accent | primary | Ring border + dot when selected (set by color) |
--mono-radio-border | #d1d5db | Circle border color |
--mono-radio-border-hover | #9ca3af | Circle border on hover |
--mono-radio-bg | #ffffff | Circle background |
--mono-radio-shadow | 0 1px 2px … | Circle shadow |
--mono-radio-ring | primary 20% | Focus-visible ring color |
--mono-radio-text | #1f2937 | Label text color |
--mono-radio-description | #6b7280 | Description text color |
--mono-radio-border-width | 2px (1.5px at xs/sm) | Circle border width |
--mono-radio-gap | 0.75rem at md, 0.375rem → 1.125rem across the scale | Gap between control and label |
The circle itself is not a variable: it is always half of --theme-control-height-* for the current size — identical to mono-checkbox at every step — so a radio stays proportional to an input or select beside it. The dot is half the circle's inner area. Label and description sizes track --theme-title-font-* / --theme-subtitle-font-* per step.
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' | — | Color theme applied to the radio. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | — | Visual size of the radio. |
disabled | boolean | — | 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 | — | — |
visible | boolean | — | Whether the control is shown. Defaults to `true`. |
visibleType | 'invisible' | 'none' | — | How it hides when `visible` is `false`. Defaults to `'none'`. |