<view class="page">
    <view class="page__hd">
        <view class="page__title">Selectable</view>
        <view class="page__desc">选框组</view>
    </view>
    <view class="page__bd">
        <view class="sub-title">Checkbox & Radio</view>
        <wux-selectable color="light" value="1" defaultChecked />
        <wux-selectable color="stable" value="2" defaultChecked />
        <wux-selectable color="positive" value="3" defaultChecked />
        <wux-selectable color="calm" value="4" />
        <wux-selectable color="balanced" value="5" />
        <wux-selectable color="energized" value="6" />
        <wux-selectable color="assertive" value="7" disabled />
        <wux-selectable color="royal" value="8" disabled />
        <wux-selectable color="dark" value="9" disabled />
        <wux-selectable type="radio" color="light" value="1" defaultChecked />
        <wux-selectable type="radio" color="stable" value="2" defaultChecked />
        <wux-selectable type="radio" color="positive" value="3" defaultChecked />
        <wux-selectable type="radio" color="calm" value="4" defaultChecked />
        <wux-selectable type="radio" color="balanced" value="5" defaultChecked />
        <wux-selectable type="radio" color="energized" value="6" defaultChecked />
        <wux-selectable type="radio" color="assertive" value="7" disabled defaultChecked />
        <wux-selectable type="radio" color="royal" value="8" disabled defaultChecked />
        <wux-selectable type="radio" color="dark" value="9" disabled defaultChecked />
        <view class="sub-title">Controlled</view>
        <wux-selectable color="light" value="1" checked="{{ checked }}" bind:change="onCheckboxChange" />
        <view class="sub-title">Slot</view>
        <wux-selectable color="light" value="1" type="default">
            <view class="icon-on" slot="icon-on"></view>
            <view class="icon-off" slot="icon-off"></view>
        </wux-selectable>
        <view class="sub-title">With cellGroup</view>
        <wux-cell-group>
            <block wx:for="{{ items }}" wx:key="index">
                <wux-cell title="{{ item.label }}">
                    <wux-selectable slot="header" wux-class="checkbox" value="{{ item.value }}" />
                </wux-cell>
            </block>
        </wux-cell-group>
        <view class="sub-title">With cellGroup</view>
        <wux-cell-group>
            <block wx:for="{{ items }}" wx:key="index">
                <wux-cell title="{{ item.label }}">
                    <wux-selectable slot="footer" wux-class="checkbox" type="radio" value="{{ item.value }}" checked="{{ value === item.value }}" controlled bind:change="onChange" />
                </wux-cell>
            </block>
        </wux-cell-group>
        <view class="sub-title">Other</view>
        <wux-selectable color="light" value="1">Agree agreement</wux-selectable>
    </view>
</view>