Skip to main content

Radio

Single-selection control. Group buttons by a shared name to enforce mutual exclusivity.

Quick start 
import { atom } from "mates";
import { Radio } from "mates-ui";

const selected = atom("b");

Radio({ label: "Option A", name: "demo", value: "a", atom: selected });
Radio({ label: "Option B", name: "demo", value: "b", atom: selected });
Radio({ label: "Option C", name: "demo", value: "c", atom: selected });

States

import { html, atom, renderApp } from 'mates';
import { Radio } from 'mates-ui';

const App = () => {
const selected = atom("b");

return () => html`<x-col gap="10px">
${Radio({ label: "Option A", name: "demo", value: "a", atom: selected })}
${Radio({ label: "Option B", name: "demo", value: "b", atom: selected })}
${Radio({ label: "Option C", name: "demo", value: "c", atom: selected })}
${Radio({ label: "Disabled", name: "dis", disabled: true })}
${Radio({ label: "Disabled checked", name: "dis-chk", disabled: true, checked: true })}
${Radio({ label: "Error", name: "err", error: true })}
</x-col>`;
};

renderApp(App, document.getElementById('app'));

Radio

import { Radio } from "mates-ui";
Prop Type Default Description
atom AtomType<string> — Reactive atom holding the selected value. Checked when atom() === value. On change, atom.set(value) is called. Supersedes checked.
attr AttrMap — HTML attributes on the root element.
checked boolean false Whether this radio is the selected option (uncontrolled).
classes string — Extra CSS class name(s) appended to the root element.
classes string | string[] — Extra root classes — joined and appended. Joined and appended after built-in classes.
data DataAttrMap — Root `data-*` map (`testId` → `data-testid`). `testId` prop / `attr` win over `data`.
disabled boolean false Disables interaction.
error boolean false Shows error state; sets aria-invalid="true" on the input.
id string — Sets id on the native input. For a root wrapper id, use `attr: { id: "…" }`.
label string | TemplateResult — Visible label rendered beside the control.
name* string — HTML form name — groups radio buttons for mutual exclusivity.
on OnEventMap — DOM event handlers on the root element.
onChange (e: Event, value: string) => void — Typed change shorthand; receives the radio's value string.
onClick (e: MouseEvent) => void — Shorthand for `on.click` (`on.click` wins when both are set).
size "sm" | "md" | "lg" "md" Control size.
style StyleMap — Root inline CSS (`style` prop; `style` wins if both set).
style StyleMap — Inline CSS on the root element.
testId string — Overrides default data-testid for testing.
value string — The value this radio represents.

CSS tokens

Token Role
--md-color-border-primary Selected disc border & dot fill
--md-color-border-strong Unselected disc border
--md-color-error Error disc border & dot fill
--md-color-error-muted Error press background
--md-color-text Label text color
--md-duration-short Border & background transition duration
--md-easing-spring Dot scale-in easing
--md-easing-standard Border & background transition easing
--md-focus-ring-color Focus ring outline color
--md-focus-ring-width Focus ring outline width
--md-font-family Label typeface
--md-space-3 Gap between disc and label
--md-state-disabled-opacity Disabled opacity
--md-state-press-bg Unselected press background
--md-text-base Font size — lg
--md-text-sm Font size — md (default)
--md-text-xs Font size — sm