Skip to main content

CupertinoSwitch

An iOS-style switch.

Used to toggle the on/off state of a single setting.

Example:

       ft.CupertinoSwitch(value=True)
CupertinoSwitch
CupertinoSwitch

Inherits: LayoutControl

Properties

Events

Examples​

Cupertino, Material and Adaptive Switches​

play_arrowTry Online
import flet as ft


def main(page: ft.Page):
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.CupertinoSwitch(label="Cupertino Switch", value=True),
                    ft.Switch(
                        label="Material Switch",
                        value=True,
                        thumb_color={ft.ControlState.SELECTED: ft.Colors.BLUE},
                        track_color=ft.Colors.YELLOW,
                        focus_color=ft.Colors.PURPLE,
                    ),
                    ft.Container(height=20),
                    ft.Text(
                        value=(
                            "Adaptive Switch shows as CupertinoSwitch on macOS and "
                            "iOS and as Switch on other platforms:"
                        )
                    ),
                    ft.Switch(adaptive=True, label="Adaptive Switch", value=True),
                ],
            ),
        )
    )


if __name__ == "__main__":
    ft.run(main)
cupertino-material-and-adaptive

Properties​

active_thumb_image_srcclass-attributeinstance-attribute​

active_thumb_image_src: str | bytes | None = None

An image to use on the thumb of this switch when the switch is on.

It can be one of the following:

  • A URL or local asset file path;
  • A base64 string;
  • Raw bytes.

active_track_colorclass-attributeinstance-attribute​

active_track_color: ColorValue | None = None

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

autofocusclass-attributeinstance-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_colorclass-attributeinstance-attribute​

focus_color: ColorValue | None = None

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

inactive_thumb_colorclass-attributeinstance-attribute​

inactive_thumb_color: ColorValue | None = None

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

If None, defaults to thumb_color, and if this is also None, defaults to CupertinoColors.WHITE.

inactive_thumb_image_srcclass-attributeinstance-attribute​

inactive_thumb_image_src: str | bytes | None = None

An image to use on the thumb of this switch when the switch is off.

It can be one of the following:

  • A URL or local asset file path;
  • A base64 string;
  • Raw bytes.

inactive_track_colorclass-attributeinstance-attribute​

inactive_track_color: ColorValue | None = None

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

labelclass-attributeinstance-attribute​

label: str | None = None

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

label_positionclass-attributeinstance-attribute​

label_position: LabelPosition = LabelPosition.RIGHT

The position of the label relative to this switch.

off_label_colorclass-attributeinstance-attribute​

off_label_color: ColorValue | None = None

The color to use for the accessibility label when the switch is off.

thumb_colorclass-attributeinstance-attribute​

thumb_color: ColorValue | None = None

The color of this switch's thumb.

thumb_iconclass-attributeinstance-attribute​

thumb_icon: ControlStateValue[IconData] | None = None

The icon of this Switch's thumb in various ControlStates.

Supported states: ControlState.SELECTED, ControlState.HOVERED, ControlState.DISABLED, ControlState.FOCUSED, and ControlState.DEFAULT.

track_outline_colorclass-attributeinstance-attribute​

track_outline_color: (
    ControlStateValue[ColorValue] | None
) = None

The outline color of this switch's track in various ControlStates.

Supported states: ControlState.SELECTED, ControlState.HOVERED, ControlState.DISABLED, ControlState.FOCUSED, and ControlState.DEFAULT.

track_outline_widthclass-attributeinstance-attribute​

track_outline_width: (
    ControlStateValue[Number | None] | None
) = None

The outline width of this switch's track in all or specific ControlStates.

Supported states: ControlState.SELECTED, ControlState.HOVERED, ControlState.DISABLED, ControlState.FOCUSED, and ControlState.DEFAULT.

valueclass-attributeinstance-attribute​

value: bool = False

The current value of this switch.

Events​

on_blurclass-attributeinstance-attribute​

on_blur: ControlEventHandler[CupertinoSwitch] | None = None

Called when this switch has lost focus.

on_changeclass-attributeinstance-attribute​

on_change: ControlEventHandler[CupertinoSwitch] | None = (
    None
)

Called when the state of this switch is changed.

on_focusclass-attributeinstance-attribute​

on_focus: ControlEventHandler[CupertinoSwitch] | None = None

Called when this switch has received focus.

on_image_errorclass-attributeinstance-attribute​

on_image_error: (
    ControlEventHandler[CupertinoSwitch] | None
) = None

Called when active_thumb_image_src or inactive_thumb_image_src fails to load.

on_label_colorclass-attributeinstance-attribute​

on_label_color: ColorValue | None = None

The color to use for the accessibility label when the switch is on.