# Checkbox
# Basic Usage
Value:
# Usage with options
You selected:
<us-form-group label="Select any historical figure">
<us-form-checkbox
name="select historical figure"
:options="['Sojourner Truth', 'Frederick Douglass', 'Booker T. Washington', 'George Washington Carver']"
v-model="checkedValues"
/>
</us-form-group>
1
2
3
4
5
6
7
2
3
4
5
6
7
# Checkbox group options array
The checkbox items are specificed by the options
prop, and is an array of strings or objects (or both). For objects, the available fields are;
value
The selected value which will be set on v-modellabel
Display text, rendered as basic text. If you require html, use thelabel
slot (see below)description
(optional) Add text that is rendered as a second line (see multi-line support below)disabled
(optional) Disables item for selectionchecked
(optional) Specifies the initial state (is checked or not)
For example;
You selected:
<us-form-group label="Select any historical figure">
<us-form-checkbox
name="select historical figure"
:options="[
{value: 1, label: 'Sojourner Truth', default:true},
{value: 2, label: 'Frederick Douglass'},
{value: 3, label: 'Booker T. Washington'},
{value: 4, label: 'George Washington Carver', disabled:true}
]"
v-model="checkedValues"
/>
</us-form-group>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
If an array entry is a string, it will be used for both the generated value and text fields. You can mix using strings and objects in the array.
# Mutli-Line labels
You selected:
<us-form-group label="Select any historical figure">
<us-form-checkbox
name="select historical figure"
:options="[
{value: 1, label: 'Sojourner Truth', description: 'Born Isabella Belle Baumfre....', default:true},
{value: 2, label: 'Frederick Douglass', description: 'Frederick Douglass...' },
{value: 3, label: 'Booker T. Washington', description: 'Booker Taliaferro Washington...'},
{value: 4, label: 'George Washington Carver', description: 'George Washington Carver...', disabled:true}
]"
v-model="checkedValues"
/>
</us-form-group>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Support for custom labels
You can customize the labels any way you want using the label
slot. The slot is given the item as a prop,
which will contain the specific item in the options data that you passed in.
You selected:
<us-form-group label="Select any historical figure">
<us-form-checkbox
name="select historical figure"
:options="[
{value: 1, label: 'Sojourner Truth', description: 'Born Isabella Belle Baumfre....', default:true},
{value: 2, label: 'Frederick Douglass', description: 'Frederick Douglass...' },
{value: 3, label: 'Booker T. Washington', description: 'Booker Taliaferro Washington...'},
{value: 4, label: 'George Washington Carver', description: 'George Washington Carver...', disabled:true}
]"
v-model="checkedValues">
<template v-slot:label="{item}">
<div style="display: inline-block; text-indent: 0">
<us-tag variant="primary" pill>{{item.label}}</us-tag>
</div>
</template>
</us-form-checkbox>
</us-form-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Validation
You can make use of built-in validation, for example;
You checked:
<us-form @submit="onSubmit()" :validate="true" v-slot="{isValid, isDirty}">
<us-form-group label="Select any historical figure">
<us-form-checkbox
name="select historical figure"
:options="options2"
:rules="{required:true}"
v-model="checkedValues2">
</us-form-checkbox>
</us-form-group>
<us-button type="submit" variant="primary">Submit</us-button>
<us-tag variant="danger" v-if="isValid === false">Invalid</us-tag>
<us-tag variant="success" v-else-if="isValid === true">Valid</us-tag>
<us-tag variant="dark" v-if="isDirty === true">Dirty</us-tag>
<us-tag variant="light" v-else-if="isDirty === false">Prestine</us-tag>
</us-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Component Reference
# <us-form-checkbox>
# Properties
Property | Type | Default | Description |
---|---|---|---|
options | array | [] | An array of items describing you checkbox items, see above |
valid | boolean | null | If true, sets the validation state a valid. False is invalid and null is indeterminate, or if wrapped in a us-form-group you can let that handle this. |
# Slots
Slot Name | Arguments | Description |
---|---|---|
label | none | Allows customization of the label |
help-text | error | Allows customization of the help text, with the current error message passed in as a prop |
validation-error | none | Allows customization of the error |
← Form Validation Radio →