Skip to main content

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).

Examples​

Live example

Basic checkboxes​

import flet as ft

def main(page):
    def button_clicked(e):
        t.value = (
            f"Checkboxes values are:  {c1.value}, {c2.value}, {c3.value}, {c4.value}, {c5.value}."
        )
        page.update()

    t = ft.Text()
    c1 = ft.Checkbox(label="Unchecked by default checkbox", value=False)
    c2 = ft.Checkbox(label="Undefined by default tristate checkbox", tristate=True)
    c3 = ft.Checkbox(label="Checked by default checkbox", value=True)
    c4 = ft.Checkbox(label="Disabled checkbox", disabled=True)
    c5 = ft.Checkbox(
        label="Checkbox with rendered label_position='left'", label_position=ft.LabelPosition.LEFT
    )
    b = ft.ElevatedButton(text="Submit", on_click=button_clicked)
    page.add(c1, c2, c3, c4, c5, b, t)

ft.app(target=main)

Checkbox with on_change event​

import flet as ft

def main(page):
  def checkbox_changed(e):
    t.value = f"Checkbox value changed to {c.value}" 
    t.update()

  c = ft.Checkbox(label="Checkbox with 'change' event", on_change=checkbox_changed)
  t = ft.Text()

  page.add(c, t)

ft.app(target=main)

Properties​

active_color​

The color to use when this checkbox is checked.

adaptive​

If the value is True, an adaptive Checkbox is created based on whether the target platform is iOS/macOS.

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

The default value is False. See the example of usage here.

autofocus​

True if the control 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​

The color and width of the checkbox's border to be rendered when the checkbox's value is False.

check_color​

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

fill_color​

The color that fills the checkbox in various material states. See Radio.fill_color for usage example.

hover_color​

The color to use when this checkbox is hovered.

is_error​

Whether this checkbox wants to show an error state. When True this checkbox will have a different default container color and check color. Defaults to False.

label​

The clickable label to display on the right of a checkbox.

label_style​

The label's style. An instance of type TextStyle.

label_position​

Defines on which side of the checkbox the label should be shown. Property value is LabelPosition enum: LabelPosition.LEFT or LabelPosition.RIGHT(default).

mouse_cursor​

The cursor to be displayed when a mouse pointer enters or is hovering over this control. See MouseCursor for possible values.

overlay_color​

The color of the checkbox's overlay in various material states. The following MaterialState values are supported: PRESSED, SELECTED, HOVERED and FOCUSED.

See usage example here.

semantics_label​

The semantic label for the checkbox that is not shown in the UI, but will be announced by screen readers in accessibility modes (e.g TalkBack/VoiceOver).

shape​

The shape of the checkbox. More information on possible values here.

Defaults to RoundedRectangleBorder(radius=2)

splash_radius​

The radius of the circular Material ink response (ripple) in logical pixels. Default's to 20.0.

tristate​

If True the checkbox's value can be True, False, or None (null).

Checkbox displays a dash when its value is null.

value​

Current value of the checkbox.

Events​

on_blur​

Fires when the control has lost focus.

on_change​

Fires when the state of the Checkbox is changed.

on_focus​

Fires when the control has received focus.