Toggle

A toggle is a button with two states, on and off. Users press it to turn an option on and press it again to turn it off. While the option is on, the toggle stays highlighted, so users read the state from the button itself.

UsageCopy Anchor Link

import { Toggle } from "@biem/ui/components/ui/toggle";

export function ToggleDefault() {
	return <Toggle>Low stock only</Toggle>;
}

ExamplesCopy Anchor Link

OutlineCopy Anchor Link

Outside a toolbar, a toggle often stands among form fields and text, where an option that is off could go unnoticed. Set to "outline", variant marks the toggle as a control in both states, so users find the option before they turn it on.

SmallCopy Anchor Link

A table header or a toolbar above a long list leaves little height for each option. With size set to "sm", a toggle claims less room, so the options stay secondary to the figures they filter.

Default SizeCopy Anchor Link

In most toolbars and filter bars, a toggle sits beside buttons and input fields of regular height. Unless another size is set, it takes the size "default" and shares their height, so options and actions keep one scale.

LargeCopy Anchor Link

One option can change what an entire screen shows, such as limiting a stock overview to a single store. When size is set to "lg", the toggle gives that option more weight, so users find it among the controls around it.

With IconCopy Anchor Link

Several toggles side by side are quicker to tell apart when each carries an icon. A label still names the option, so its meaning stays clear even where the icon alone would leave room for doubt.

Pressed by DefaultCopy Anchor Link

Certain options apply to most of the daily work, for example a filter that limits a list to the store users work in. The toggle then starts on through defaultPressed, and users turn it off only when they need the full picture.

ControlledCopy Anchor Link

Other parts of the interface may depend on whether an option is on, such as a list that changes with it or an action that resets every filter. Through pressed and onPressedChange, the application holds that state and can turn the toggle on or off itself, while users still change it with a press.

DisabledCopy Anchor Link

Some options make sense only under a condition, for example a comparison that needs a second store first. Marked as disabled, the toggle keeps its current state, accepts no press and exposes the disabled state to assistive technology, so users still see the option without changing it by mistake.

API ReferenceCopy Anchor Link