Skip to content
Yuzur1ha Open

Component referenceDraft

Switch

A switch represents a persistent binary setting. Keep its label stable while the checked state changes.

Updated

Design notes

Icons may distinguish modes, but a visible or accessible label still describes the setting. Selection feedback uses color rather than press scaling.

Design sourceOpen in Figma

Switch design

Inspect the original component, variants and visual details.

Playground

Playgrounddemo.tsx

Notifications

Disabled states

Sizes with icons

small
medium
large
true

content/components/switch/demo.tsx

import { useState } from "react"
import { Moon, Sun } from "lucide-react"
import { Switch } from "@yuzur1ha/ui"
import { DemoResult } from "../../examples/result"

export function SwitchDemo() {
  const [value, setValue] = useState(true)
  return (
    <>
      <section className="demo-switch-group" aria-label="Interactive switch">
        <h2>Notifications</h2>
        <Switch
          label="Email notifications"
          checked={value}
          onChange={(event) => setValue(event.target.checked)}
        />
      </section>
      <section className="demo-switch-group" aria-label="Disabled switches">
        <h2>Disabled states</h2>
        <div className="demo-switch-states">
          <Switch label="Disabled" checked disabled />
          <Switch label="Disabled off" checked={false} disabled />
        </div>
      </section>
      <section
        className="demo-switch-group"
        aria-label="Switch sizes with icons"
      >
        <h2>Sizes with icons</h2>
        <div className="demo-switch-samples">
          {(["small", "medium", "large"] as const).map((size) => (
            <div className="demo-switch-sample" key={size}>
              <span>{size}</span>
              <Switch
                size={size}
                label={`${size} theme`}
                hideLabel
                uncheckedIcon={<Sun aria-hidden="true" />}
                checkedIcon={<Moon aria-hidden="true" />}
              />
            </div>
          ))}
        </div>
      </section>
      <DemoResult>{String(value)}</DemoResult>
    </>
  )
}

API

Switch

A labelled native checkbox with switch semantics. State icons are decorative. className styles the label, ref points to the input.

SwitchProps
PropertyTypeRequiredDefaultDescription
labelstringYes—Visible label and accessible name.
sizeComponentSizeNo"medium"Visual size: small, medium or large.
hideLabelbooleanNofalseVisually hide the label while keeping the control accessibly named.
checkedIconReactNodeNo—Decorative icon inside the thumb in the checked state.
uncheckedIconReactNodeNo—Decorative icon inside the thumb in the unchecked state.
checkedbooleanNo—Controlled checked state. Pair with onChange.
defaultCheckedbooleanNo—Initial checked state for an uncontrolled checkbox or radio.
onChangeChangeEventHandler<HTMLInputElement, HTMLInputElement>No—Native input change handler. Read value or checked from event.currentTarget.
disabledbooleanNo—Disables the native control.
requiredbooleanNo—Requires a non-empty native control value during form validation.
namestringNo—Native form submission field name.
valuestring | number | readonly string[]No—Current native control value. Pair with onChange for controlled input.
idstringNo—Native control ID. Generated when omitted; the visible label and supporting text use this association.
classNamestringNo""Additional classes applied to the component’s documented root or control.
refRef<HTMLInputElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.