Forms

Stable - @kikita-labs/ui v1.6.1

Switch

Native checkbox rendered as a switch while keeping native keyboard and form behavior.

Import

Use the directive on native checkbox inputs and pair it with kui-field for field-level wiring.

switch.ts
import { KuiFieldComponent, KuiSwitchDirective } from '@kikita-labs/ui';

Usage

Open in Playground

Keep native label text next to the switch and reserve switch for binary settings.

Control product and release notifications

<kui-field label="Notifications" hint="Control product and release notifications">
  <label class="switch-option">
    <input kuiSwitch type="checkbox" checked />
    <span>Enable notifications</span>
  </label>
</kui-field>

Sizes

Use the same size scale as other Kikita form controls.

<div class="switch-size-example">
  <label class="switch-option">
    <input kuiSwitch type="checkbox" size="xs" />
    <span>Extra small</span>
  </label>
  <label class="switch-option">
    <input kuiSwitch type="checkbox" size="sm" checked />
    <span>Small</span>
  </label>
  <label class="switch-option">
    <input kuiSwitch type="checkbox" size="md" checked />
    <span>Medium</span>
  </label>
  <label class="switch-option">
    <input kuiSwitch type="checkbox" size="lg" />
    <span>Large</span>
  </label>
</div>

API

Inputs verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg' — Switch size mapped to Kikita switch tokens.
invalidboolean — Marks the switch invalid outside a field error state.
idstring | undefined — Explicit id override. Inside kui-field, the field id is used when omitted.

Accessibility

Switch adds role=switch while keeping the native checkbox element.

  • Render kuiSwitch on a native input[type=checkbox]; the directive adds role="switch" while the element keeps native checkbox semantics, keyboard support, and form participation.
  • Wrap the input in a native label so the switch text is the accessible name.
  • Space toggles the switch and Tab moves focus, matching native checkbox keyboard behavior; the directive does not add custom key handling.
  • Use kui-field for group label, hint, error, and aria-describedby wiring instead of building described-by attributes by hand.
  • Set the native disabled attribute to disable the control; use the directive's invalid input to mark it invalid outside a kui-field error state.
  • Use switch only for an immediate binary setting, not multi-choice selection.
  • Per the Kikita UI library's state coverage notes, Switch has local playground coverage for off, on, hover, focus, invalid, disabled, sizes, and field wiring, but a dedicated assistive-technology review has not been completed yet.