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	FillByEqualWidth
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
numPerLine	Number	number of tags per line	Optional, valid only when alignment == 'FillByEqualWidth'	2 for iPhone 4 for iPad

alignment	Description
Left	-
Center	-
Right	-
FillByExpandingSpace	expand horizontal spacing and fill line
FillByExpandingWidth	expand the width of the last tag and fill each line
FillByEqualWidth	make each tag the same width and fill line

options is an array contains option dictionary:

Key	Type	Description	Flags	Default
title	String	option title	Required, Localizable	-
value	Any?	option value	Optional	identical 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"
        }
    ]
}