Skip to main content

CupertinoCheckbox

A macOS style checkbox.

Checkbox allows to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).

ft.Column(
    intrinsic_width=True,
    controls=[
        ft.CupertinoCheckbox(),
        ft.CupertinoCheckbox(label="Checked", value=True),
        ft.CupertinoCheckbox(label="Disabled", disabled=True),
    ],
)
CupertinoCheckbox
Basic CupertinoCheckboxes

Inherits: LayoutControl

Properties

  • active_color - The color used to fill checkbox when it is checked/selected.
  • autofocus - Whether this checkbox will be selected as the initial focus.
  • border_side - Defines the checkbox's border sides in all or specific ControlState states.
  • check_color - The color to use for the check icon when this checkbox is checked.
  • fill_color - The color used to fill this checkbox in all or specific ControlState states.
  • focus_color - The color used for this checkbox's border shadow when it has the input focus.
  • label - A clickable label to display on the right of this checkbox.
  • label_position - Defines on which side of this checkbox the label should be shown.
  • mouse_cursor - The cursor for a mouse pointer entering or hovering over this checkbox.
  • semantics_label - The semantic label for this checkbox that will be announced by screen readers.
  • shape - The shape of this checkbox.
  • spacing - The space between this checkbox and the label.
  • tristate - If True, this checkbox's value can be True, False, or None.
  • value - The value of this checkbox.

Events

  • on_blur - Called when this checkbox has lost focus.
  • on_change - Called when the state of this checkbox is changed.
  • on_focus - Called when this checkbox has received focus.

Examples​

Live example

Cupertino, Material and Adaptive Checkboxes​

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.CupertinoCheckbox(label="Cupertino Checkbox", value=True),
                    ft.Checkbox(label="Material Checkbox", value=True),
                    ft.Container(height=20),
                    ft.Text(
                        value=(
                            "Adaptive Checkbox shows as CupertinoCheckbox on macOS "
                            "and iOS and as Checkbox on other platforms:"
                        )
                    ),
                    ft.Checkbox(
                        adaptive=True,
                        label="Adaptive Checkbox",
                        value=True,
                    ),
                ],
            ),
        )
    )


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

Styled checkboxes​

import flet as ft


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT

    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.CupertinoCheckbox(
                        label="Cupertino Checkbox tristate",
                        value=True,
                        tristate=True,
                        check_color=ft.Colors.GREY_900,
                        fill_color={
                            ft.ControlState.HOVERED: ft.Colors.PINK_200,
                            ft.ControlState.PRESSED: ft.Colors.LIME_ACCENT_200,
                            ft.ControlState.SELECTED: ft.Colors.DEEP_ORANGE_200,
                            ft.ControlState.DEFAULT: ft.Colors.TEAL_200,
                        },
                    ),
                    ft.CupertinoCheckbox(
                        label="Cupertino Checkbox circle border",
                        value=True,
                        shape=ft.CircleBorder(),
                    ),
                    ft.CupertinoCheckbox(
                        label="Cupertino Checkbox border states",
                        value=True,
                    ),
                    ft.CupertinoCheckbox(
                        label="Cupertino Checkbox label position",
                        value=True,
                        label_position=ft.LabelPosition.LEFT,
                    ),
                ],
            ),
        )
    )


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

Properties​

active_colorclass-attributeinstance-attribute​

active_color: Optional[ColorValue] = CupertinoColors.ACTIVE_BLUE

The color used to fill checkbox when it is checked/selected.

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

autofocusclass-attributeinstance-attribute​

autofocus: bool = False

Whether this checkbox 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.

border_sideclass-attributeinstance-attribute​

border_side: Optional[ControlStateValue[BorderSide]] = None

Defines the checkbox's border sides in all or specific ControlState states.

Note

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

check_colorclass-attributeinstance-attribute​

check_color: Optional[ColorValue] = None

The color to use for the check icon when this checkbox is checked.

fill_colorclass-attributeinstance-attribute​

fill_color: Optional[ControlStateValue[ColorValue]] = None

The color used to fill this checkbox in all or specific ControlState states.

active_color is used as fallback color when the checkbox is in the SELECTED state, CupertinoColors.WHITE at 50% opacity is used as fallback color when this checkbox is in the DISABLED state, and CupertinoColors.WHITE otherwise.

Note

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

focus_colorclass-attributeinstance-attribute​

focus_color: Optional[ColorValue] = None

The color used for this checkbox's border shadow when it has the input focus.

labelclass-attributeinstance-attribute​

label: Optional[str] = None

A clickable label to display on the right of this checkbox.

label_positionclass-attributeinstance-attribute​

label_position: LabelPosition = LabelPosition.RIGHT

Defines on which side of this checkbox the label should be shown.

mouse_cursorclass-attributeinstance-attribute​

mouse_cursor: Optional[MouseCursor] = None

The cursor for a mouse pointer entering or hovering over this checkbox.

semantics_labelclass-attributeinstance-attribute​

semantics_label: Optional[str] = None

The semantic label for this checkbox that will be announced by screen readers.

This is announced by assistive technologies (e.g TalkBack/VoiceOver) and not shown on the UI.

shapeclass-attributeinstance-attribute​

shape: Optional[OutlinedBorder] = None

The shape of this checkbox.

Internally defaults to RoundedRectangleBorder(radius=4).

spacingclass-attributeinstance-attribute​

spacing: Optional[Number] = 10

The space between this checkbox and the label.

tristateclass-attributeinstance-attribute​

tristate: bool = False

If True, this checkbox's value can be True, False, or None.

valueclass-attributeinstance-attribute​

value: Optional[bool] = False

The value of this checkbox.

  • If True, this checkbox is checked.
  • If False, this checkbox is unchecked.
  • If None and tristate is True, this checkbox is indeterminate (displayed as a dash).

Events​

on_blurclass-attributeinstance-attribute​

on_blur: Optional[ControlEventHandler[CupertinoCheckbox]] = None

Called when this checkbox has lost focus.

on_changeclass-attributeinstance-attribute​

on_change: Optional[ControlEventHandler[CupertinoCheckbox]] = None

Called when the state of this checkbox is changed.

on_focusclass-attributeinstance-attribute​

on_focus: Optional[ControlEventHandler[CupertinoCheckbox]] = None

Called when this checkbox has received focus.