Checkbox (lv_checkbox)

Overview

The Checkbox Widget is created from a "tick box" and a label. When the Checkbox is clicked the tick box is toggled.

Parts and Styles

The Checkbox is added to the default group (if one is set).

Usage

Text

The text can be modified with lv_checkbox_set_text(cb, "New text") and will be dynamically allocated.

To set static text, use lv_checkbox_set_text_static(cb, txt). This way, only a pointer to txt will be stored. The provided text buffer must remain available for the lifetime of the Checkbox.

Check, uncheck, disable

You can programmatically check, un-check, and disable the Checkbox by using the common state add/clear function:

lv_obj_add_state(cb, LV_STATE_CHECKED);    /* Make Checkbox checked */
lv_obj_remove_state(cb, LV_STATE_CHECKED); /* Make Checkbox unchecked */
lv_obj_add_state(cb, LV_STATE_CHECKED);    /* Make Checkbox checked */
lv_obj_add_state(cb, LV_STATE_DISABLED);   /* Make Checkbox disabled */

To find out whether the Checkbox is checked use lv_obj_has_state(cb, LV_STATE_CHECKED).

Events

Further Reading

Learn more about Events emitted by all Widgets.

Learn more about Events.

Keys

The following Keys are processed by Checkbox:

  • LV_KEY_RIGHT/UP Go to CHECKED state if Checkbox is enabled

  • LV_KEY_LEFT/DOWN Go to non-CHECKED state if Checkbox is enabled

  • LV_KEY_ENTER Clicks the Checkbox and toggles its value.

Note that, as usual, the state of LV_KEY_ENTER is translated to LV_EVENT_PRESSED/PRESSING/RELEASED etc.

Further Reading

Learn more about Keys.

Examples

Simple Checkboxes

#include "../../lv_examples.h"
#if LV_USE_CHECKBOX && LV_BUILD_EXAMPLES

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target_obj(e);
    LV_UNUSED(obj);
    if(code == LV_EVENT_VALUE_CHANGED) {
        const char * txt = lv_checkbox_get_text(obj);
        const char * state = lv_obj_get_state(obj) & LV_STATE_CHECKED ? "Checked" : "Unchecked";
        LV_UNUSED(txt);
        LV_UNUSED(state);
        LV_LOG_USER("%s: %s", txt, state);
    }
}

/**
 * @title Checkbox states stacked vertically
 * @brief Four labelled checkboxes covering default, checked, disabled, and multi-line variants.
 *
 * The active screen uses `LV_FLEX_FLOW_COLUMN` with start alignment and holds
 * four checkboxes: `Apple` in the default state, `Banana` with
 * `LV_STATE_CHECKED`, `Lemon` with `LV_STATE_DISABLED`, and
 * `Melon\nand a new line` with both checked and disabled states and a
 * two-line label. A shared `LV_EVENT_ALL` callback logs the checkbox text
 * and its current checked state on `LV_EVENT_VALUE_CHANGED`.
 */
void lv_example_checkbox_1(void)
{
    lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);

    lv_obj_t * cb;
    cb = lv_checkbox_create(lv_screen_active());
    lv_checkbox_set_text(cb, "Apple");
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_screen_active());
    lv_checkbox_set_text(cb, "Banana");
    lv_obj_add_state(cb, LV_STATE_CHECKED);
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_screen_active());
    lv_checkbox_set_text(cb, "Lemon");
    lv_obj_add_state(cb, LV_STATE_DISABLED);
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_screen_active());
    lv_obj_add_state(cb, LV_STATE_CHECKED);
    lv_obj_add_state(cb, LV_STATE_DISABLED);
    lv_checkbox_set_text(cb, "Melon\nand a new line");
    lv_obj_add_event_cb(cb, event_handler, LV_EVENT_ALL, NULL);

    lv_obj_update_layout(cb);
}

#endif

Checkboxes as radio buttons

#include "../../lv_examples.h"
#if LV_USE_CHECKBOX && LV_BUILD_EXAMPLES

static lv_style_t style_radio;
static lv_style_t style_radio_chk;

static void event_cb(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target_obj(e);
    if(lv_obj_has_state(obj, LV_STATE_CHECKED)) {
        LV_LOG_USER("%s is selected.", lv_checkbox_get_text(obj));
    }
    else {
        LV_LOG_USER("%s is de-selected.", lv_checkbox_get_text(obj));
    }
}

/**
 * @title Checkboxes as radio buttons
 * @brief A group of five checkboxes where only one can be checked at a time.
 *
 * A centered flex-column container holds five checkboxes labelled
 * `Radio button 1` through `Radio button 5`. Each one calls
 * `lv_obj_set_radio_button(obj, true)` so checking one clears the others,
 * and two `LV_PART_INDICATOR` styles round the indicator with
 * `LV_RADIUS_CIRCLE` and clear the default checkmark image in
 * `LV_STATE_CHECKED`. Each checkbox logs its label and selection state on
 * `LV_EVENT_VALUE_CHANGED`.
 */
void lv_example_checkbox_2(void)
{
    lv_style_init(&style_radio);
    lv_style_set_radius(&style_radio, LV_RADIUS_CIRCLE);

    lv_style_init(&style_radio_chk);
    lv_style_set_bg_image_src(&style_radio_chk, NULL);


    lv_obj_t * cont = lv_obj_create(lv_screen_active());
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_size(cont, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_center(cont);

    uint32_t i;
    char buf[32];
    for(i = 0; i < 5; i++) {
        lv_snprintf(buf, sizeof(buf), "Radio button %d", (int)i + 1);

        lv_obj_t * obj = lv_checkbox_create(cont);
        lv_checkbox_set_text(obj, buf);

        lv_obj_add_event_cb(obj, event_cb, LV_EVENT_VALUE_CHANGED, NULL);

        /*This makes the checkboxes act as radio buttons*/
        lv_obj_set_radio_button(obj, true);

        lv_obj_add_style(obj, &style_radio, LV_PART_INDICATOR);
        lv_obj_add_style(obj, &style_radio_chk, LV_PART_INDICATOR | LV_STATE_CHECKED);
    }

    /*Make the first checkbox checked*/
    //    lv_obj_add_state(lv_obj_get_child(cont, 0), LV_STATE_CHECKED);
}

#endif

API

lv_checkbox.h

lv_checkbox_private.h

lv_obj_property_names.h