components switch

components/switch

Import: import { Switch } from "@tundralibs/ui/switch"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Switch

Switch(props: SwitchProps): Html

Types

SwitchProps

Prop	Type	Required	Description
id	string
name	string
value	string
checked	boolean
disabled	boolean
label	`string	Html`
hint	`string	Html`
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A setting with its consequence

Switch({
  name: "two_factor",
  label: "Two-factor authentication",
  hint: "Required for admins from 1 Oct.",
  checked: true,
})

<label class="switch">
  <input type="checkbox" class="switch__input" name="two_factor" checked="">
  <span class="switch__track">
    <span class="switch__thumb"></span>
  </span>
  <span class="switch__text">
    <span class="switch__label">Two-factor authentication</span>
    <span class="switch__hint">Required for admins from 1 Oct.</span>
  </span>
</label>

CSS hooks

Classes defined by components/switch/switch.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.switch, .switch__hint, .switch__input, .switch__label, .switch__text, .switch__thumb, .switch__track