Switch · Orbex Sonar-DB Design System

Examples

On, off with help, disabled

Daily shipments

Compact figuresShows 1.96K instead of 1,960 where space is short.

Recurring orders

Code

tsx

import { Switch } from '@orbex/sonar-components/switch'

export default function Examples() {
  return (
    <>
      <Switch label="Daily shipments" defaultChecked />
      <Switch label="Compact figures" description="Shows 1.96K instead of 1,960 where space is short." />
      <Switch label="Recurring orders" disabled />
    </>
  )
}

Sizes, variants and states

Usage

For settings that apply immediately. For a choice that is submitted later, use Checkbox.
Name what is turned on, not the action: “Daily shipments”, not “Show daily shipments”.

Do and don’t

DoA switch acts at once: the setting is on as soon as it is turned on.

Don’tSwitches in a form that waits for Save. Choices confirmed later are checkboxes.

DoName the setting in positive words, so on means yes.

Don’tA negative label, where on means no.

Accessibility

Keyboard

Key	What it does
Tab	Moves focus to the switch.
Space	Turns it on or off.

Roles and attributes

Element or attribute	What it gives
`<input type="checkbox" role="switch">`	Announced as a switch, on or off; still a checkbox in forms and without JavaScript.
`<label>`	Wraps the input, so the label names it and clicking the label toggles it.
`aria-describedby`	Ties the help text to the input without adding it to the name.

Notes

A native checkbox with role="switch": announced as a switch, on or off, toggled with Space.
The help text sits outside the label, so it describes the switch without lengthening its name.
On touch screens the row grows to 48 px.

Use it

Each component is its own entry point with its own stylesheet, so an app loads only what it uses. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { Switch } from '@orbex/sonar-components/switch'
import '@orbex/sonar-components/switch.css'

API

Props of Switch
Prop	Type	Default
`label` Required What the switch turns on.	`ReactNode`	—
`description` One line on the effect, read after the label.	`ReactNode`	—

Also takes every attribute of the native <input> , except type | role, and a ref to it.