# Checkbox (/examples/widgets/checkbox)



Checkbox bind checked + bind flag [#checkbox-bind-checked--bind-flag]

<LvglExampleBrief>
  A checkbox drives an int subject; a sibling label hides when the subject is zero.
</LvglExampleBrief>

`bind_checked` connects the checkbox's checked state to `subject_flag` (0 or 1).
The note label uses a subject to enable the `hidden` flag when `subject_flag`
equals 0 — so the label only shows once the box is ticked.

<LvglExample name="lv_example_checkbox_bind_checked" path="widgets/checkbox/lv_example_checkbox_bind_checked" />

Checkbox value-changed event [#checkbox-value-changed-event]

<LvglExampleBrief>
  Mirror the toggle state into a sibling label.
</LvglExampleBrief>

`LV_EVENT_VALUE_CHANGED` fires when the user toggles the checkbox. The
state isn't in the payload — read it with
`lv_obj_has_state(cb, LV_STATE_CHECKED)` and use any LVGL call inside
the handler (here, `lv_label_set_text` on a sibling).

<LvglExample name="lv_example_checkbox_event" path="widgets/checkbox/lv_example_checkbox_event" />

Checkbox states [#checkbox-states]

<LvglExampleBrief>
  Show unchecked, checked, and disabled tick boxes side by side.
</LvglExampleBrief>

Each checkbox carries the same text but advertises a different state. State is
toggled at runtime with `lv_obj_add_state(cb, LV_STATE_CHECKED)` and friends; in
XML the same effect is achieved by setting the state attribute directly.

<LvglExample name="lv_example_checkbox_states" path="widgets/checkbox/lv_example_checkbox_states" />

Checkbox styling [#checkbox-styling]

<LvglExampleBrief>
  Style the tick box (INDICATOR) and its checked state separately.
</LvglExampleBrief>

Checkbox exposes MAIN (label text area) and INDICATOR (tick box). The named styles
target INDICATOR in both default and `checked` states so the tick box has a soft,
rounded look unchecked and switches to an accent color with a tinted halo when
checked. MAIN is styled with local `style_*` props to recolor the label area.

<LvglExample name="lv_example_checkbox_styling" path="widgets/checkbox/lv_example_checkbox_styling" />

Checkbox text [#checkbox-text]

<LvglExampleBrief>
  Set the label that appears next to the tick box.
</LvglExampleBrief>

Three checkboxes share a layout but each carries a different text: a short word, a
longer single-line sentence, and a multi-line label using `&#10;` for the line break.
The text attribute is what `lv_checkbox_set_text` would set in code, and the gap
between tick box and label is controlled by `pad_column` on the main part.

<LvglExample name="lv_example_checkbox_text" path="widgets/checkbox/lv_example_checkbox_text" />