wovoui

Form Checkbox

For cross browser consistency, <CheckboxGroup> and <Checkbox> use wovoui's custom checkbox input to replace the browser default checkbox input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default checkbox input.

State: not_accepted

<template>
    <div>
        <b-form-checkbox
            id="checkbox-1"
            v-model="status"
            name="checkbox-1"
            value="accepted"
            unchecked-value="not_accepted">
            I accept the terms and use
        </b-form-checkbox>

        <div>State: <strong>{{ status }}</strong></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            status: 'not_accepted'
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Control sizing

Use the size prop to control the size of the checkbox. The default size is medium. Supported size values are sm ( small) and lg (large).


<Checkbox size="sm">Small</Checkbox>
<Checkbox>Default</Checkbox>
<Checkbox size="lg">Large</Checkbox>
1
2
3
4

Sizes can be set on individual <Checkbox> components, or inherited from the size setting of <CheckboxGroup>.