Skip to main content

Switch

A toggle control for binary on/off settings, with optional icons and inline track text.

Quick start 
import { Switch } from "mates-ui";

Switch({ label: "Notifications", checked: true });

States

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

const App = () => {
const notifs = atom(true);
const darkMode = atom(false);

return () => html`<x-col gap="10px">
${Switch({ label: "Notifications", atom: notifs })}
${Switch({ label: "Dark mode", atom: darkMode, onIcon: "dark_mode", offIcon: "light_mode" })}
${Switch({ label: "Disabled off", disabled: true })}
${Switch({ label: "Disabled on", disabled: true, checked: true })}
</x-col>`;
};

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

Switch

import { Switch } from "mates-ui";
Prop Type Default Description
atom AtomType<boolean> — Reactive atom binding. Reads and writes checked state. Supersedes checked.
attr AttrMap — HTML attributes on the root element.
checked boolean false Initial checked state (uncontrolled, no atom).
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.
enableRipple boolean true Renders a circular ripple halo centered on the thumb.
id string — Sets id on the native input. For a root wrapper id, use `attr: { id: "…" }`.
label string | TemplateResult — Visible label rendered beside the switch.
name string — HTML form field name.
offIcon IconInput — Icon shown inside the thumb when the switch is OFF.
offText string — Text shown inside the track when OFF.
on OnEventMap — DOM event handlers on the root element.
onChange (e: Event, checked: boolean) => void — Typed change shorthand; called after atom update when atom is bound.
onClick (e: MouseEvent) => void — Shorthand for `on.click` (`on.click` wins when both are set).
onIcon IconInput — Icon shown inside the thumb when the switch is ON.
onText string — Text shown inside the track when ON.
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.

CSS tokens

Token Role
--md-color-border-primary Selected track fill & border
--md-color-border-strong Unselected track border & thumb fill
--md-color-on-primary Thumb fill when ON
--md-color-primary Thumb hover halo tint
--md-color-text Label text color
--md-color-text-muted Track text color (off state)
--md-duration-base Track & thumb slide transition
--md-duration-short Thumb resize transition
--md-easing-spring Thumb slide easing
--md-easing-standard Color transition easing
--md-focus-ring-color Focus ring outline color
--md-focus-ring-width Focus ring outline width
--md-font-family Label typeface
--md-radius-full Track pill shape
--md-space-4 Gap between track and label
--md-state-disabled-opacity Disabled opacity
--md-surface-control-track Unselected track background
--md-text-base Font size — lg
--md-text-sm Font size — md (default)
--md-text-xs Font size — sm