---
title: "Switch"
description: "Switch api."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';

<CodeSnippetMD imagePath="/src/assets/generated/std-widgets-switch.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets switch example'>
```slint
import { Switch } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 40px;

    Switch {
        text: "Hello World";
    }
}
```
</CodeSnippetMD>

A `Switch` is a representation of a physical switch that allows users to turn things on or off. Consider using a `CheckBox` instead if you want the user to select or deselect values, for example in a list with multiple options.

## Properties

### checked
<SlintProperty typeName="bool" propName="checked" defaultValue="false" propertyVisibility="in-out">
Whether the switch is checked or not.

```slint "checked: true;"
Switch {
    text: self.checked ? "Checked" : "Not checked";
    checked: true;
}
```
</SlintProperty>

### enabled
<SlintProperty typeName="bool" propName="enabled" defaultValue="true" >
When false, the switch can't be pressed
</SlintProperty>

### has-focus
<SlintProperty typeName="bool" propName="has-focus" propertyVisibility="out">
Set to true when the switch has keyboard focus
</SlintProperty>

### text
<SlintProperty typeName="string" propName="text" >
The text written next to the switch.

```slint 'text: "Switch with text";'
Switch {
    text: "Switch with text";
}
```
</SlintProperty>

## Callbacks

### toggled()
The switch value changed

```slint {3-5}
Switch {
    text: "Switch";
    toggled() => {
        debug("Switch checked: ", self.checked);
    }
}
```