Switch

A two-state toggle for a setting that takes effect as it is flipped.

import { Switch } from "@glint/components/switch.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    in-out property <bool> airplane-mode: false;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            Switch {
                label: "Airplane Mode";
                checked <=> root.airplane-mode;
            }
        }

        Text {
            text: root.airplane-mode ? "Status: Offline (Disconnected)" : "Status: Online (Connected)";
            color: Tokens.color-muted-foreground;
            font-size: Tokens.typography-body-sm-size;
            horizontal-alignment: center;
        }
    }
}

Usage

import { Switch } from "@glint/components/switch.slint";

export component AppWindow inherits Window {
    in-out property <bool> notifications: true;

    VerticalLayout {
        alignment: center;

        Switch {
            label: "Push Notifications";
            checked <=> root.notifications;
            toggled(is-on) => {
                // handle toggle change
            }
        }
    }
}

Switch provides a sliding toggle control for turning individual binary options on or off.

Examples

Sizes

The size property adjusts the track, knob, and border radius proportionally:

SwitchSize.default: Standard 36 × 20 px track.
SwitchSize.sm: Compact 26 × 14 px track for dense toolbars or compact list items.

import { Switch, SwitchSize } from "@glint/components/switch.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                spacing: 16px;

                Switch {
                    size: SwitchSize.default;
                    label: "Default Switch";
                    checked: true;
                }

                Switch {
                    size: SwitchSize.sm;
                    label: "Compact Small Switch";
                    checked: true;
                }
            }
        }
    }
}

Disabled and invalid states

Set disabled: true to dim the switch and prevent clicks. Set invalid: true to display a destructive error border and announce an invalid state.

import { Switch } from "@glint/components/switch.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                spacing: 14px;

                Switch {
                    label: "Required Consent Setting";
                    invalid: true;
                    checked: false;
                }

                Switch {
                    label: "Managed Enterprise Feature";
                    disabled: true;
                    checked: true;
                }
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`size`	`in SwitchSize`	`SwitchSize.default`	Track + knob preset — sm or default.
`checked`	`in-out bool`	`false`	Two-way on/off state.
`label`	`in string`	no default	Text shown to the right of the track.
`disabled`	`in bool`	`false`	When true, the switch dims and stops responding.
`invalid`	`in bool`	`false`	When true, the track wears the destructive border and announces itself invalid. The message that explains the error belongs to the surrounding `Field` — bind this to that Field's `invalid`.
`focus-visible`	`out bool`	no default	Whether this control holds the keyboard and got it from the keyboard — the `focus-visible` a hover surface opens on. Published because Slint reports focus only to the element holding it, so a `Tooltip` wrapping this control cannot read it off the scope inside (tooltip.slint).
`focus-held`	`out bool`	no default	The same focus, still true while a popup has borrowed the window's — what a hover surface opened by this control has to gate on, since showing itself is what takes `focus-visible` away. See `Tooltip`.

Callbacks

Callback	Description
`toggled(bool)`	Fired with the new `checked` value.

Functions

Function Description

focus-from-keyboard() Hand the control the keyboard the way a key press does, ring and all. A host that moves the focus onto a control because the user pressed something — Questionnaire stepping to the next question — cannot use focus(): Slint reports that as programmatic, which is how a host parking the keyboard looks, and the scope drops the ring for it. Published by every control that publishes focus-visible, for the same reason: the scope inside cannot be reached from outside the component.

Function	Description
`focus-from-keyboard()`	Hand the control the keyboard the way a key press does, ring and all. A host that moves the focus onto a control because the user pressed something — `Questionnaire` stepping to the next question — cannot use `focus()`: Slint reports that as `programmatic`, which is how a host parking the keyboard looks, and the scope drops the ring for it. Published by every control that publishes `focus-visible`, for the same reason: the scope inside cannot be reached from outside the component.

Enums

Enum	Values
`SwitchSize`	`sm`, `default`

Accessibility

Switch role. Publishes accessible-role: switch with accessible-checkable: true and accessible-checked.
invalid announces the word “Invalid”. Slint 1.17 publishes no accessible-invalid, so the state rides the description channel ADR-0013 opened: the control’s own description first, then "Invalid" after it. A red border is not the announcement — this is.
Keyboard navigation. Space or Enter toggles state when focused.
Focus ring. Displays a 2px outer ring when focused via keyboard navigation.