UI Toolbox logoUI Toolbox

Switch

A Switch is a Toggle that shows a track with a knob. The knob slides to the right when the value is true. Everything else is Toggle: value, label, text and the value change events.

<tb:Switch label="Subtitles" value="true" />
<tb:Switch label="Autosave" description="Saves the layout every minute." />
<tb:Switch label="Compact rows" small="true" />
var autosave = new Switch("Autosave") { Description = "Saves the layout every minute." };
autosave.RegisterValueChangedCallback(evt => settings.Autosave = evt.newValue);
Member Description
Small (small) Shows a smaller track and knob, for a dense row or a toolbar.
Description (description) A muted text under the label that says what the switch does. Empty (the default) shows none.

Tips:

Styling

Class Element
tb-switch The toggle. The unity-toggle classes also apply. The checkmark element is the track: 32 x 18 px, --tb-color-surface-alt, and --tb-color-accent when checked.
tb-switch__knob The 12 px knob in the track. When checked, it moves 14 px to the right with a translate transition.
tb-switch--small A switch with Small on: a track of 24 x 14 px and a knob of 8 px that moves 10 px.
tb-switch--described A switch with a Description. Its content wraps, so the description goes under the label.
tb-switch__description The description, a Label: --tb-color-text-muted with --tb-font-size-sm.