form fields

<tc-switch>

Toggle switch — a styled, form-associated boolean control with keyboard and ARIA support.

import "@ra9/tan-compose-kit/switch"

Props

NameTypeDefaultDescription
checkedbooleanfalseWhether the switch is on. Reflects to the host.
namestring""Field name for form submission.
valuestring"on"Value submitted under `name` when the switch is on.
labelstring""Text rendered next to the switch.
helperstring""Small helper text below the row.
errorstring""Error message; the switch's `aria-invalid` flips to true.
disabledbooleanfalseDisables the control; reflects to the host.

Events

EventDetailWhen
tc-change{ checked: boolean }Fires when the user toggles the switch (click, Space, or Enter).

CSS variables

VariableDefaultDescription
--tc-switch-track-offvar(--tc-color-rule-strong, #d9cfb8)Track color when off.
--tc-switch-track-onvar(--tc-color-accent, #a16939)Track color when on.
--tc-switch-thumbvar(--tc-color-surface, #ffffff)Color of the thumb.
--tc-switch-fgvar(--tc-color-ink, #14171f)Label color.
--tc-switch-helpervar(--tc-color-ink-muted, #6b7280)Helper text color.
--tc-switch-errorvar(--tc-color-danger, #b3261e)Error message color.
--tc-switch-fontvar(--tc-font-sans, …)Font family.

Examples

Basic usage

<tc-switch label="Email notifications"></tc-switch> <tc-switch label="Beta features" checked></tc-switch>

States

With helper

<tc-switch label="Two-factor auth" helper="Requires an authenticator app installed on your phone." ></tc-switch>

Keyboard

Space and Enter both toggle the switch when it has focus. Click also works. The internal control is a <button role="switch"> so it's reachable via Tab order.

In a form

The switch is form-associated. It submits value under name only when on, matching native checkbox conventions.

<form> <tc-switch name="notify" value="yes" label="Email me when this changes"></tc-switch> <tc-button type="submit">Save</tc-button> </form>

Theming

<tc-switch style="--tc-switch-track-on: #207a5b;" label="Custom on color" checked ></tc-switch>

Accessibility

  • Built on a <button role="switch"> with aria-checked reflecting state.
  • Keyboard activation via Space and Enter; the :focus-visible ring is visible on keyboard focus.
  • aria-invalid flips when error is set.
  • The label is associated with the switch via a wrapping <label> — clicking the text also toggles.

← All components