WebBetaForms

Web only — React, from @krizaka/ui/switch. Beta: its API may still change in a minor version.

When to use

For a setting that takes effect immediately: autoplay, notifications, a weekly digest.

When not to use

For a choice submitted with a form, or an agreement.Use instead: Checkbox
For more than two states.Use instead: Radio group
To run an action.Use instead: Button

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Switch } from "@krizaka/ui/switch";

Examples

Off

Named by label.

import { Switch } from "@krizaka/ui/switch";

export default function SwitchOff() {
  return <Switch label="Autoplay" />;
}

On

defaultChecked (or checked + onCheckedChange).

import { Switch } from "@krizaka/ui/switch";

export default function SwitchOn() {
  return <Switch label="Autoplay" defaultChecked />;
}

Disabled

Off and on.

import { Switch } from "@krizaka/ui/switch";

export default function SwitchDisabled() {
  return (
    <div className="flex gap-4">
      <Switch label="Autoplay" disabled />
      <Switch label="Loop" disabled defaultChecked />
    </div>
  );
}

Small

size="sm".

import { Switch } from "@krizaka/ui/switch";

export default function SwitchSmall() {
  return <Switch label="Autoplay" size="sm" defaultChecked />;
}

With a visible label

A label and a hint on the same line.

Weekly digest

One email on Monday with what you missed.

import { Field } from "@krizaka/ui/field";
import { Switch } from "@krizaka/ui/switch";

// Named by a visible label (`Field.Label htmlFor`), with a hint.
export default function SwitchWithLabel() {
  return (
    <Field.Root className="w-80">
      <div className="flex items-center justify-between gap-4">
        <Field.Label htmlFor="digest" className="text-sm text-fg">
          Weekly digest
        </Field.Label>
        <Switch id="digest" defaultChecked aria-describedby="digest-hint" />
      </div>
      <Field.Hint id="digest-hint">One email on Monday with what you missed.</Field.Hint>
    </Field.Root>
  );
}

Props

An on/off switch: checked/defaultChecked + onCheckedChange.

Prop	Type	Default	Description
`invalid`	`boolean`	—	Marks it invalid: aria-invalid and data-invalid.
`label`	`string`	—	The accessible name — required when no visible label names it, passed translated.
`size`	`"sm" \| "md"`	`md`	sm · md.

Accessibility

Radix Switch: role="switch" with aria-checked.
label names it when no visible label does; otherwise use Field.Label htmlFor and aria-describedby for the hint.

Keyboard

Keys	Action
`Space`	Toggles the switch.

Best practices

Name the setting, not the state: “Autoplay”, not “Turn autoplay on”.
Put the label first and the switch at the end of the line (Field.Label htmlFor), with a hint when it helps.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Switch