# Boolean extension
Sometimes you just need a quick yes/no boolean component, we've got you covered.
# As a radio (the default)
You selected: true
<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
# As a dropdown
Set the prop type to 'dropdown' (or 'combobox') to render as a dropdown.
- No results found
You selected: true
<us-form-group label="Select any historical figure">
<us-form-checkbox
type='dropdown'
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
8
2
3
4
5
6
7
8
# As a toggle switch
Set the prop type to 'toggle' for a toggler.
You selected: true
<us-form-group label="Select any historical figure">
<us-form-checkbox
type='toggle'
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
8
2
3
4
5
6
7
8
# Validation
You can make use of built-in validation, for example;
You entered:
<us-form @submit="onSubmit()" :validate="true" v-slot="{isValid, isDirty}">
<us-form-group label="A basic text field">
<us-form-boolean
name="text-input2"
v-model="currentValue2"
:rules="{required:true}"
/>
</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
2
3
4
5
6
7
8
9
10
11
12
13
14