Checkbox

Overview

Checkbox is a multi-selection form control and is based on the Angular Material checkbox component.

Examples

import mesop as me


@me.stateclass
class State:
  checked: bool


def on_update(event: me.CheckboxChangeEvent):
  state = me.state(State)
  state.checked = event.checked


@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/checkbox",
)
def app():
  state = me.state(State)
  me.checkbox(
    "Simple checkbox",
    on_change=on_update,
  )

  if state.checked:
    me.text(text="is checked")
  else:
    me.text(text="is not checked")

API

checkbox

Creates a simple Checkbox component with a text label.

PARAMETER	DESCRIPTION
label	Text label for checkbox TYPE: str | None DEFAULT: None
on_change	Event emitted when the checkbox's checked value changes. TYPE: Callable[[CheckboxChangeEvent], Any] | None DEFAULT: None
on_indeterminate_change	Event emitted when the checkbox's indeterminate value changes. TYPE: Callable[[CheckboxIndeterminateChangeEvent], Any] | None DEFAULT: None
label_position	Whether the label should appear after or before the checkbox. Defaults to 'after' TYPE: Literal['before', 'after'] DEFAULT: 'after'
disable_ripple	Whether the checkbox has a ripple. TYPE: bool DEFAULT: False
tab_index	Tabindex for the checkbox. TYPE: int DEFAULT: 0
color	Palette color of the checkbox. TYPE: Literal['primary', 'accent', 'warn'] | None DEFAULT: None
checked	Whether the checkbox is checked. TYPE: bool DEFAULT: False
disabled	Whether the checkbox is disabled. TYPE: bool DEFAULT: False
indeterminate	Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately set to false. TYPE: bool DEFAULT: False
style	Style for the component. TYPE: Style | None DEFAULT: None
key	The component key. TYPE: str | None DEFAULT: None

content_checkbox

Creates a Checkbox component which is a composite component. Typically, you would use a text or icon component as a child.

Intended for advanced use cases.

PARAMETER	DESCRIPTION
on_change	Event emitted when the checkbox's checked value changes. TYPE: Callable[[CheckboxChangeEvent], Any] | None DEFAULT: None
on_indeterminate_change	Event emitted when the checkbox's indeterminate value changes. TYPE: Callable[[CheckboxIndeterminateChangeEvent], Any] | None DEFAULT: None
label_position	Whether the label should appear after or before the checkbox. Defaults to 'after' TYPE: Literal['before', 'after'] DEFAULT: 'after'
disable_ripple	Whether the checkbox has a ripple. TYPE: bool DEFAULT: False
tab_index	Tabindex for the checkbox. TYPE: int DEFAULT: 0
color	Palette color of the checkbox. TYPE: Literal['primary', 'accent', 'warn'] | None DEFAULT: None
checked	Whether the checkbox is checked. TYPE: bool DEFAULT: False
disabled	Whether the checkbox is disabled. TYPE: bool DEFAULT: False
indeterminate	Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately set to false. TYPE: bool DEFAULT: False
style	Style for the component. TYPE: Style | None DEFAULT: None
key	The component key. TYPE: str | None DEFAULT: None

CheckboxChangeEvent dataclass

Bases: MesopEvent

Represents a checkbox state change event.

ATTRIBUTE	DESCRIPTION
checked	The new checked state of the checkbox. TYPE: bool
key	key of the component that emitted this event. TYPE: str

CheckboxIndeterminateChangeEvent dataclass

Bases: MesopEvent

Represents a checkbox indeterminate state change event.

ATTRIBUTE	DESCRIPTION
checked	The new indeterminate state of the checkbox.
key	key of the component that emitted this event. TYPE: str