Accordion Alerts / Banner Buttons Card Collection Combo box
  • Combo box
Forms Language Layout List Navigation Other Search Social Summary box

Combo box (combo_box)

A combo box helps users select an item from a large list of options.

🔗 External documentation.

ID Label Description Schema
options Options Array of items with a text value. 
                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object
required Required The combo box component will be required in terms of native form validation. 
                        type: boolean
disabled Disabled The combo box component will be disabled / read-only. You can re-enable it by executing the enable procedure on the component. 
                        type: boolean
placeholder Placeholder text To update the placeholder text of the combo box, use the data-placeholder attribute. We recommend using a label or hint instead of a placeholder. 
                        type: string
default_value Default value The combo box will set this value as the default selection if it is found within the select options. 
                        type: string

                      
            id: combo_box
label: 'Combo box'
description: 'A combo box helps users select an item from a large list of options.'
group: 'Combo box'
homepage: 'https://designsystem.digital.gov/components/combo-box/'
props:
    options:
        id: options
        label: Options
        description: 'Array of items with a text value.'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
    required:
        id: required
        label: Required
        description: 'The combo box component will be required in terms of native form validation.'
        schema:
            type: boolean
    disabled:
        id: disabled
        label: Disabled
        description: 'The combo box component will be disabled / read-only. You can re-enable it by executing the enable procedure on the component.'
        schema:
            type: boolean
    placeholder:
        id: placeholder
        label: 'Placeholder text'
        description: 'To update the placeholder text of the combo box, use the data-placeholder attribute. We recommend using a label or hint instead of a placeholder.'
        schema:
            type: string
    default_value:
        id: default_value
        label: 'Default value'
        description: 'The combo box will set this value as the default selection if it is found within the select options.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': combo_box
            options:
                -
                    type: option
                    value: apple
                    label: Apple
                -
                    type: option
                    value: apricot
                    label: Apricot
                -
                    type: option
                    value: banana
                    label: 'Banana Smoothie'
            required: true
            placeholder: 'Example placeholder'
            default_value: apple
<div class="usa-combo-box" data-default-value="apple" data-placeholder="Example placeholder"> <select class="usa-select" required="true"> <option value="apple">Apple </option> <option value="apricot">Apricot </option> <option value="banana">Banana Smoothie </option> </select> </div>