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. |
- The description takes a full row under the label and the track.
- A click on the label, the track or the description changes the value. Enter, Space or the submit button of a gamepad changes it on the focused switch.
Tips:
- Use a description for a setting whose label does not say the effect.
- For one option in a toolbar that has no label, use a ToggleButton.
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. |