Checkbox

Register on Lenra

Element of type Checkbox

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 componentstring ("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
onPressedBasic Listener
styleElement of type CheckboxStyleCheckboxStyle
tristateWhether the checkbox can have 3 states.boolean