Appearance
Radio
A single radio option used standalone or as part of a group sharing the same model-value. Sizes, color variants, an optional sublabel, and slot-overridable label and sublabel text. Toggle Vue / CSS to switch the live demo and source together.
The look is Basecoat's .input[type="radio"] (see Theme): a 16px circle (4/9 of the control step, so it stays paired with the checkbox and input beside it) with a 1px --input border, the 3px --ring focus ring, and — when selected — a --primary fill carrying a --primary-foreground dot at half its width. The label is Basecoat's .label (text-sm font-medium leading-snug, gap-2). Dark mode is built in.
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
Pick a colour and the group takes it — the selected dot re-paints live; the disabled option shows it dimmed.
Vue SFC
States
Disabled and pre-selected.
Vue SFC
Sublabel
sublabel adds a smaller second line under the label. description still works as another name for it, and both share one value.
Vue SFC
Slots
Custom label and sublabel via named slots: slot="label" and slot="sublabel" (the older slot="description" still works).
Vue SFC
Event: change
Listen to change to react to selection.
Vue SFC
Event log
Live log of 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, but Basecoat has the recipe: .field > label:has(input[type="radio"]) is rounded-md border p-3, and a label holding a checked control takes bg-primary/5 border-primary/30 (dark /10 and /20, which the --mono-mode-checked-bg / -border tokens carry). Both demo tabs below are exactly that.
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 tokens (--input, --primary, --ring …) — or switch flavor.
| Variable | Default | Controls |
|---|---|---|
--mono-radio-accent / --mono-radio-dot-color | --primary / --primary-foreground (set by color) | Circle fill + border when selected, and the dot on it |
--mono-radio-checked-bg | --mono-radio-accent | Circle background when selected — set it transparent for a hollow circle (what the sera flavor does) |
--mono-radio-bg | --mono-mode-surface (transparent, dark --input/30) | Circle background when unselected |
--mono-radio-border-color (alias --mono-radio-border) / --mono-radio-border-width | --input / --mono-border-width (1px) | Circle border |
--mono-radio-radius / --mono-radio-dot-radius | --mono-radius-full | Circle / dot corner (the rhea flavor squares the circle off to 2xl) |
--mono-radio-shadow | none (Basecoat gives the radio no shadow-xs, unlike the checkbox) | Resting circle shadow |
--mono-radio-ring-color / -ring-width / -ring-alpha | --ring / --mono-ring-width / --mono-ring-alpha | Focus-visible ring |
--mono-radio-dot | 50% (Basecoat's size-2 on a size-4 circle) | The dot's share of the circle |
--mono-radio-size-<size> | --mono-control-height-<size> × 4/9 | The circle, per step |
--mono-radio-gap (or -gap-<size>) | 2 × --mono-spacing at md, 1.25 → 3.5 across the scale | Gap between circle and label |
--mono-radio-label-font-<size> / --mono-radio-label-font-weight / --mono-radio-label-line-height | --mono-text-sm at md / --mono-label-font-weight / --mono-leading-snug | Label |
--mono-radio-description-font-<size> | 13px at md | Description |
--mono-radio-text / --mono-radio-description | --foreground / --muted-foreground | Label / description ink |
Every metric is checkbox's: the two sit side by side in a form, so circle ≡ box, gap ≡ gap and label ≡ label at every step — a perf spec asserts it.
Deprecated and honoured as no-ops until 2.0: --mono-radio-border-hover (Basecoat has no hover on the circle), --mono-radio-ring (use -ring-color), --mono-radio-accent-soft.
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' | 'teal' | 'purple' | 'neutral' | 'dark' | — | 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. |
sublabel | string | — | Secondary line under the label. `slot="sublabel"` replaces it. |
description | string | — | The same as `sublabel` — still accepted, both names share one value. |
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 | 'none' | 'invisible' | — | How it hides when `visible` is `false`. Defaults to `'none'`. |