Switch component · Kition Tessera

Playground

Props

disabled

What is shown

import { Switch } from '@kition/tessera-ui'
import { useState } from 'react'

const [checked, setChecked] = useState(true)

<Switch
  aria-label="Snap to grid"
  checked={checked}
  onCheckedChange={setChecked}
/>

When to use

A setting that takes effect without a Save.

When not to

A choice saved with a form: use Checkbox.

Examples

On, off, disabled

Sync across devices: on Beta features (unavailable)

switch.tsx

import { useState } from 'react'
import { Switch } from '@kition/tessera-ui'

export default function Demo() {
  const [sync, setSync] = useState(true)
  return (
    <div className="demo-stack">
      <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14 }}>
        <Switch checked={sync} onCheckedChange={setSync} aria-label="Sync across devices" /> Sync across devices: {sync ? 'on' : 'off'}
      </label>
      <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: 'var(--kit-text-muted)' }}>
        <Switch disabled aria-label="Beta features" /> Beta features (unavailable)
      </label>
    </div>
  )
}

Props

Switch

An on/off switch for a setting that applies at once. Controlled with checked and onCheckedChange.

No props.

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).

Used in

1 of Kition's 16 kits use this component.

Table