Switch

A toggle represents a physical switch that allows someone to choose between two mutually exclusive options.

For example, "On/Off", "Show/Hide".

    ft.Switch(label="Unchecked switch", value=False)
    ft.Switch(label="Disabled switch", disabled=True)

Switch — Basic switch and disabled switch

Inherits: LayoutControl, AdaptiveControl

Properties

active_color(Optional[ColorValue]) –

The color to use when this switch is on.
active_track_color(Optional[ColorValue]) –

The color to use on the track when this switch is on.
adaptive(Optional[bool]) –

Whether an adaptive Switch should be created based on the target platform.
autofocus(bool) –

Whether this switch will be selected as the initial focus. If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.
focus_color(Optional[ColorValue]) –

The color to use for the focus highlight for keyboard interactions.
hover_color(Optional[ColorValue]) –

The color to be used when it is being hovered over by the mouse pointer.
inactive_thumb_color(Optional[ColorValue]) –

The color to use on the thumb when this switch is off.
inactive_track_color(Optional[ColorValue]) –

The color to use on the track when this switch is off.
label(Optional[StrOrControl]) –

The clickable label to display on the right of this switch.
label_position(LabelPosition) –

The position of the label, if provided.
label_text_style(Optional[TextStyle]) –

The label's text style, when it is a string.
mouse_cursor(Optional[MouseCursor]) –

The cursor to be displayed when a mouse pointer enters or is hovering over this control.
overlay_color(Optional[ControlStateValue[ColorValue]]) –

The color for the switch's Material in various ControlState states.
padding(Optional[PaddingValue]) –

The amount of space to surround the child inside the bounds of the Switch.
splash_radius(Optional[Number]) –

The radius of the splash effect when the switch is pressed.
thumb_color(Optional[ControlStateValue[ColorValue]]) –

The color of this switch's thumb in various ControlState
thumb_icon(Optional[ControlStateValue[IconData]]) –

The icon of this Switch's thumb in various ControlState states.
track_color(Optional[ControlStateValue[ColorValue]]) –

The color of this switch's track in various ControlState states.
track_outline_color(Optional[ControlStateValue[ColorValue]]) –

The outline color of this switch's track in various ControlState
track_outline_width(Optional[ControlStateValue[Optional[Number]]]) –

The outline width of this switch's track in all or specific ControlState states.
value(bool) –

Current value of this switch.

Events

on_blur(Optional[ControlEventHandler[Switch]]) –

Called when the control has lost focus.
on_change(Optional[ControlEventHandler[Switch]]) –

Called when the state of the Switch is changed.
on_focus(Optional[ControlEventHandler[Switch]]) –

Called when the control has received focus.

Examples#

Live example

Basic Example#

import flet as ft


def main(page: ft.Page):
    def handle_button_click(e: ft.Event[ft.Button]):
        message.value = (
            f"Switch values are:  {c1.value}, {c2.value}, {c3.value}, {c4.value}."
        )
        page.update()

    page.add(
        c1 := ft.Switch(label="Unchecked switch", value=False),
        c2 := ft.Switch(label="Checked switch", value=True),
        c3 := ft.Switch(label="Disabled switch", disabled=True),
        c4 := ft.Switch(
            label="Switch with rendered label_position='left'",
            label_position=ft.LabelPosition.LEFT,
        ),
        ft.Button(content="Submit", on_click=handle_button_click),
        message := ft.Text(),
    )


if __name__ == "__main__":
    ft.run(main)

Handling change events#

import flet as ft


def main(page: ft.Page):
    def handle_switch_change(e: ft.Event[ft.Switch]):
        page.theme_mode = (
            ft.ThemeMode.DARK
            if page.theme_mode == ft.ThemeMode.LIGHT
            else ft.ThemeMode.LIGHT
        )
        e.control.label = (
            "Light ThemeMode"
            if page.theme_mode == ft.ThemeMode.LIGHT
            else "Dark ThemeMode"
        )
        page.update()

    page.theme_mode = ft.ThemeMode.LIGHT
    page.add(ft.Switch(label="Light ThemeMode", on_change=handle_switch_change))


if __name__ == "__main__":
    ft.run(main)

Properties#

active_color `class-attribute` `instance-attribute` #

active_color: Optional[ColorValue] = None

The color to use when this switch is on.

active_track_color `class-attribute` `instance-attribute` #

active_track_color: Optional[ColorValue] = None

The color to use on the track when this switch is on.

If track_color returns a non-none color in the ControlState.SELECTED state, it will be used instead of this color.

adaptive `class-attribute` `instance-attribute` #

adaptive: Optional[bool] = None

Whether an adaptive Switch should be created based on the target platform.

On iOS and macOS, a CupertinoSwitch is created, which has matching functionality and presentation as Switch, and the graphics as expected on iOS. On other platforms, a Material Switch is created.

Defaults to False. See the example of usage here.

autofocus `class-attribute` `instance-attribute` #

autofocus: bool = False

Whether this switch will be selected as the initial focus. If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.

focus_color `class-attribute` `instance-attribute` #

focus_color: Optional[ColorValue] = None

The color to use for the focus highlight for keyboard interactions.

hover_color `class-attribute` `instance-attribute` #

hover_color: Optional[ColorValue] = None

The color to be used when it is being hovered over by the mouse pointer.

inactive_thumb_color `class-attribute` `instance-attribute` #

inactive_thumb_color: Optional[ColorValue] = None

The color to use on the thumb when this switch is off.

Defaults to colors defined in the material design specification.

If thumb_color returns a non-none color in the ControlState.DEFAULT state, it will be used instead of this color.

inactive_track_color `class-attribute` `instance-attribute` #

inactive_track_color: Optional[ColorValue] = None

The color to use on the track when this switch is off.

Defaults to colors defined in the material design specification.

If track_color returns a non-none color in the ControlState.DEFAULT state, it will be used instead of this color.

label `class-attribute` `instance-attribute` #

label: Optional[StrOrControl] = None

The clickable label to display on the right of this switch.

label_position `class-attribute` `instance-attribute` #

label_position: LabelPosition = RIGHT

The position of the label, if provided.

label_text_style `class-attribute` `instance-attribute` #

label_text_style: Optional[TextStyle] = None

The label's text style, when it is a string.

mouse_cursor `class-attribute` `instance-attribute` #

mouse_cursor: Optional[MouseCursor] = None

The cursor to be displayed when a mouse pointer enters or is hovering over this control.

overlay_color `class-attribute` `instance-attribute` #

overlay_color: Optional[ControlStateValue[ColorValue]] = (
    None
)

The color for the switch's Material in various ControlState states.

The following states are supported: ControlState.PRESSED, ControlState.SELECTED, ControlState.HOVERED, ControlState.FOCUSED and ControlState.DEFAULT.

padding `class-attribute` `instance-attribute` #

padding: Optional[PaddingValue] = None

The amount of space to surround the child inside the bounds of the Switch.

Defaults to horizontal padding of 4 pixels. If Theme.use_material3 is false, then there is no padding by default.

splash_radius `class-attribute` `instance-attribute` #

splash_radius: Optional[Number] = None

The radius of the splash effect when the switch is pressed.

Raises:

ValueError –

If splash_radius is negative.