Lenra Docs
Register on Lenra
  • Home
  • Getting started
    Open/Close
  • Guides
    Open/Close
  • Features
    Open/Close
  • References
    Open/Close
  • Contribute

    Checkbox

    This component provides a toggleable checkbox with several presentation options.

    Examples

    Simple checkbox

    Here is a checkbox in it's simplest form.

    {
        "type": "checkbox",
        // data["checkbox"] being either true/false
        "value": data["checkbox"],
        "onPressed": {
            "code": "checkbox",
        }
    }
    

    Disabled checkbox

    To disable a checkbox you only need to not use the onPressed property.

    {
        "type": "checkbox",
        // Checkbox will still be checked even if disabled when setting value to true
        "value": true,
    }
    

    Tristate checkbox

    The checkbox can be used as a tristate element. This means that in addition to being true/false it can also be null. This is commonly used on tables that contains multiple checkboxes, when only a part of the checkboxes are selected, the "parent" checkbox enters the third state, it is not checked because not all of its children have been selected and not unchecked beause some have been.

    {
        "type": "checkbox",
        // data["checkbox"] being either true/false/null
        "value": data["checkbox"],
        "tristate": true,
        "onPressed": {
            "code": "checkbox"
        }
    }
    

    Properties

    AttributeDescriptionType
    _typeThe identifier of the component
    • checkbox
    valueThe default state of the checkboxboolean
    autofocusWhether the checkbox is focused initially.boolean
    materialTapTargetSizeElement of type MaterialTapTargetSizestring
    • shrinkWrap
    • padded
    nameThe name that will be used in the form.string
    onPressedListener
    styleElement of type CheckboxStyleCheckboxStyle
    tristateWhether the checkbox can have 3 states.boolean