Checkbox

The check box component is generally used in scenarios that require multiple selections. This component has complete functions and is easy to use

platform compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

basic use

vue

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // Basic case data
            checkboxList1: [{
                    name: 'apple',
                    disabled: false
                },
                {
                    name: 'banana',
                    disabled: false
                },
                {
                    name: 'orange',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // Basic case data
            checkboxList1: [{
                    name: 'apple',
                    disabled: false
                },
                {
                    name: 'banana',
                    disabled: false
                },
                {
                    name: 'orange',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

Custom shape

You can set the checkbox to be square or circle by setting shape to square or circle

vue

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            shape="circle"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // Basic case data
            checkboxList1: [{
                    name: 'apple',
                    disabled: false
                },
                {
                    name: 'banana',
                    disabled: false
                },
                {
                    name: 'orange',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            shape="circle"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // Basic case data
            checkboxList1: [{
                    name: 'apple',
                    disabled: false
                },
                {
                    name: 'banana',
                    disabled: false
                },
                {
                    name: 'orange',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

disable checkbox

Set disabled to true to disable a component so that users cannot click it. There are two states of disabling. One is to disable before it is checked, and only a gray area is displayed at this time. The second is to disable it after it has been checked, there will be a gray checked icon, but it is still inoperable at this time.

vue

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
                :disabled="item.disabled"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // Basic case data
            checkboxList1: [{
                    name: 'apple',
                    disabled: false
                },
                {
                    name: 'banana',
                    disabled: false
                },
                {
                    name: 'orange',
                    disabled: true
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

<template>
    <view>
        <wu-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <wu-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
                :disabled="item.disabled"
            >
            </wu-checkbox>
        </wu-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],
            // Basic case data
            checkboxList1: [{
                    name: 'apple',
                    disabled: false
                },
                {
                    name: 'banana',
                    disabled: false
                },
                {
                    name: 'orange',
                    disabled: true
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>

Custom Colors

The color referred to here is the background color when checkbox is selected, and the parameter is activeColor

html

<wu-checkbox-group v-model="checked">
	<wu-checkbox  activeColor="red" label="light and shadow"></wu-checkbox>
</wu-checkbox-group>

<wu-checkbox-group v-model="checked">
	<wu-checkbox  activeColor="red" label="light and shadow"></wu-checkbox>
</wu-checkbox-group>

Horizontal arrangement

You can set the checkboxes to be arranged horizontally or vertically by setting placement to row or column.

html

<wu-checkbox-group v-model="checked" placement="row">
	<wu-checkbox activeColor="red" label="red"></wu-checkbox>
	<wu-checkbox activeColor="green" label="green"></wu-checkbox>
</wu-checkbox-group>

<wu-checkbox-group v-model="checked" placement="row">
	<wu-checkbox activeColor="red" label="red"></wu-checkbox>
	<wu-checkbox activeColor="green" label="green"></wu-checkbox>
</wu-checkbox-group>

Horizontal two ends arrangement form

You can set the alignment of the checkbox icon to be left or right by setting iconPlacement to left or right

html

<wu-checkbox-group 
    v-model="checked"
    iconPlacement="right" 
    placement="row">
	<wu-checkbox activeColor="red" label="red"></wu-checkbox>
	<wu-checkbox activeColor="green" label="green"></wu-checkbox>
</wu-checkbox-group>

<wu-checkbox-group 
    v-model="checked"
    iconPlacement="right" 
    placement="row">
	<wu-checkbox activeColor="red" label="red"></wu-checkbox>
	<wu-checkbox activeColor="green" label="green"></wu-checkbox>
</wu-checkbox-group>

API

Checkbox Props

Note: Among radio and radio-group parameters with the same name, the radio parameter has a higher priority.

property name	description	type	default value	optional values
name	the name of the checkbox	String / Number	-	-
shape	shape, square is a square, circle is a circle	String	square	square / circle
size	overall size	String / Number	-	-
checked	whether it is checked by default	Boolean	false	true / false
disabled	Whether to disable	Boolean	-	-
activeColor	The color in the selected state, if this value is set, it will override the parent's activeColor value	String	-	-
inactiveColor	inactive color	String	-	-
iconSize	The size of the icon, in px	String / Number	-	-
iconColor	icon color	String	-	-
label	label prompt text, because under nvue, the text directly slotted in, due to the special structure, the style cannot be modified	String / Number	-	-
labelSize	font size of the label, in px	String / Number	-	-
labelColor	the color of the label	String	-	-
labelDisabled	Whether to disable clicking on the prompt to select the checkbox	String / Boolean	-	-

CheckboxGroup Props

property name	description	type	default value	optional values
name	identifier	String	-	-
value / modelValue	Binding value	String / Number / Boolean	''	-
shape	shape, circle-circle, square-square	String	circle	circle / square
disabled	Whether to disable all radios	Boolean	false	true
activeColor	The color in the selected state, if the sub-component sets this value, it will overwrite this value	String	#2979ff	-
inactiveColor	Inactive color	String	#c8c9cc	-
size	The size of the entire component, default px	String / Number	18	-
placement	layout method, row-horizontal, column-vertical	String	row	column
labelSize	font size of the label, in px	String / Number	14	-
labelColor	font color of label	String	#303133	-
labelDisabled	Whether to disable clicking on the text	Boolean	false	true / false
iconColor	icon color	String	#ffffff	-
iconSize	The size of the icon, in px	String / Number	12	-
iconPlacement	The alignment of the check icon, left-left, right-right	String	left	left / right
borderBottom	Whether to display an underline when vertically arranging columns	Boolean	false	true / false

CheckboxGroup Event

method name	description	callback parameters
change	Triggered when any `checkbox` state changes	detail = array( [element is the `name` of the selected `checkbox`] )

Slot Name	Description
default	custom content
icon	Custom selected icon

Checkbox ​

platform compatibility ​

basic use ​

Custom shape ​

disable checkbox ​

Custom Colors ​

Horizontal arrangement ​

Horizontal two ends arrangement form ​

API ​

Checkbox Props ​

CheckboxGroup Props ​

CheckboxGroup Event ​

Checkbox

platform compatibility

basic use

Custom shape

disable checkbox

Custom Colors

Horizontal arrangement

Horizontal two ends arrangement form

API

Checkbox Props

CheckboxGroup Props

CheckboxGroup Event