Shows a "light switch" that has two states: on or off.

<picture> <source srcset="switch-dark.png" media="(prefers-color-scheme: dark)"> <img alt="An example GtkSwitch" src="switch.png"> </picture>

The user can control which state should be active by clicking the empty area, or by dragging the slider.

`GtkSwitch` can also express situations where the underlying state changes with a delay. In this case, the slider position indicates the user's recent change (represented by the [property@Gtk.Switch:active] property), while the trough color indicates the present underlying state (represented by the [property@Gtk.Switch:state] property).

<picture> <source srcset="switch-state-dark.png" media="(prefers-color-scheme: dark)"> <img alt="GtkSwitch with delayed state change" src="switch-state.png"> </picture>

See [signal@Gtk.Switch:GtkSwitch:state-set] for details.

Shortcuts and Gestures

`GtkSwitch` supports pan and drag gestures to move the slider.

CSS nodes

``` switch ├── image ├── image ╰── slider ```

`GtkSwitch` has four css nodes, the main node with the name switch and subnodes for the slider and the on and off images. Neither of them is using any style classes.

Accessibility

`GtkSwitch` uses the [enum@Gtk.AccessibleRole.switch] role.