Switch

A switch lets users turn one setting on or off. Its thumb sits at one end of the track while the setting is off and moves to the other end when users turn it on, and the track changes its color with it. The switch has no label of its own, so the examples name it with a FieldLabel whose htmlFor refers to the id of the switch. A click on the label then changes the switch just as a click on the switch does.

UsageCopy Anchor Link

import { Field, FieldLabel } from "@biem/ui/components/ui/field";
import { Switch } from "@biem/ui/components/ui/switch";

export function SwitchDefault() {
	return (
		<div className="w-full max-w-sm">
			<Field orientation="horizontal">
				<Switch id="low-stock-alerts"/>
				<FieldLabel htmlFor="low-stock-alerts">Low stock alerts</FieldLabel>
			</Field>
		</div>
	);
}

ExamplesCopy Anchor Link

SmallCopy Anchor Link

Dense settings lists and table rows leave little room beside each label. With size set to "sm", the switch takes less room, so many settings fit into a compact list without crowding the content around them.

Default SizeCopy Anchor Link

Most switches stand in forms, dialogs and settings pages, where they need no size of their own. When size is left out, the switch takes the value "default", which keeps every setting at the same scale across Biem products.

Checked by DefaultCopy Anchor Link

Some settings suit most users from the start, such as a daily summary of sales by email. Through defaultChecked, the switch starts on, so users act only when the setting does not fit their work.

ControlledCopy Anchor Link

Often the application needs to know a setting the moment it changes, for example to show the options that belong to it. With checked and onCheckedChange, the application holds the state of the switch, so the switch can also reflect a value from saved preferences or from another part of the interface.

DisabledCopy Anchor Link

A setting can depend on another one, such as a rounding rule for prices that only applies while automatic pricing is on. Once disabled is set, the switch stays in view while users can no longer turn it on or off, and it exposes this state to assistive technology. Its value is left out when the form is submitted.

InvalidCopy Anchor Link

Some settings cannot be saved together with others, and users need to see at once which switch stands in the way. When validation fails, aria-invalid marks the switch as invalid, on screen as well as for assistive technology.

API ReferenceCopy Anchor Link