Select (dropdown) | USWDS-Vue

In USWDS this is called the combo-box, but is more widely known as a select component. The Component is also aliased to <us-form-select> for backwards compatability.

# Basic Usage

Select any historical figure

You selected: Sojourner Truth

<us-form-group label="Select any historical figure">
    <us-form-select
        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

# 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-select
            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

# 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-select
            name="select historical figure"
            :options="options"
            :rules="{required:true}"
            v-model="checkedValues">
        </us-form-select>
    </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

← Radio Date Input →

# Select (dropdown)

# Basic Usage

# Setting key and label fields with complex data

# Validation