# Combo box (dropdown)
# Basic Usage
- No results found
You selected: Sojourner Truth
<us-form-group label="Select any historical figure">
<us-form-combobox
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
# Setting key and label fields with complex data
You can specify the key field and label fields using the key-field
and label-field
prop.
You checked:
<us-form @submit="onSubmit()" :validate="true" v-slot="{isValid, isDirty}">
<us-form-group label="Select any historical figure">
<us-form-combobox
name="select historical figure"
key-field="id"
label-field="name"
:options="[
{ id: 1, name: 'Sojourner Truth'},
{ id: 2, name: 'Frederick Douglass'},
{ id: 3, name: 'Booker T. Washington'},
{ id: 4, name: 'George Washington Carver'}
]"
v-model="checkedValues"
/>
</us-form-group>
</us-form>
<div class="mt-2">You checked: {{checkedValues}}</div>
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-combobox
name="select historical figure"
:options="options"
:rules="{required:true}"
v-model="checkedValues">
</us-form-combobox>
</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
← Radio Date Input →