6n. Cell: Radio and Checkbox

Radio and Checkbox are components like <input type="radio"> and <input type="checkbox"> in HTML with several option tags inside.

Tapping a tag in Radio will select it, but deselect other tags in the same group, while tapping a tag in Checkbox will switch its state.

Key	Type	Description	Flags	Default
alignment	String	tag alignment	Optional	Left
options	Array <Dictionary>	option dictionary list	Required	-
minCount	Number	minimum selection limit	Optional, valid for Checkbox	0
maxCount	Number	maximum selection limit	Optional, valid for Checkbox	INT_MAX

alignment	Description
Left	-
Center	-
Right	-
Natural	expand horizontal spacing and fill
Justified	expand tag width and fill

options is an array contains option dictionary:

Key	Type	Description	Flags	Default
title	String	option title	Required, Localizable	-
value	Any?	option value	Optional	the same to title

label/icon/height are not supported.

theme Key	Type	Description
tagTextColor	color	text color for normal tags
tagSelectedTextColor	color	text color for selected tags
tagBackgroundColor	color	background color for normal tags
tagSelectedBackgroundColor	color	background color for selected tags
tagBorderColor	color	border color for normal tags
tagSelectedBorderColor	color	border color for selected tags

value Type	Description
Array <Any?>	array of values for selected options without order

Example

Checkbox

{
    "default": [
        "Red",
        "Green"
    ],
    "cell": "Checkbox",
    "key": "checkbox",
    "maxCount": 4,
    "options": [
        {
            "title": "Red"
        },
        {
            "title": "Green"
        },
        {
            "title": "Blue"
        },
        {
            "title": "Yellow"
        },
        {
            "title": "Purple"
        },
        {
            "title": "Black"
        },
        {
            "title": "White"
        }
    ]
}

Radio

{
    "default": "Fifth; please!",
    "cell": "Radio",
    "key": "radio",
    "options": [
        {
            "title": "First"
        },
        {
            "title": "Second"
        },
        {
            "title": "Third"
        },
        {
            "title": "Fourth"
        },
        {
            "title": "Fifth; please!"
        },
        {
            "title": "Zero"
        }
    ]
}