Select menu (web component)

Select menus let users select one option from a number of options.

<bolt-select label="Select menu name">
    <option value="item1">Select menu item one</option>
    <option value="item2">Select menu item two</option>
    <option value="item3">Select menu item three</option>
</bolt-select>

<bolt-select label="Select menu name" required error="You must select an option">
    <option value="item1">Select menu item one</option>
    <option value="item2">Select menu item two</option>
    <option value="item3">Select menu item three</option>
</bolt-select>

<bolt-select label="Field Name" required invalid>
    <option value="item1">Select menu item one</option>
    <option value="item2">Select menu item two</option>
    <option value="item3">Select menu item three</option>
</bolt-select>

<bolt-select label="Select menu name" disabled>
    <option value="item1">Select menu item one</option>
    <option value="item2">Select menu item two</option>
    <option value="item3">Select menu item three</option>
</bolt-select>

<bolt-select label="Non-required select menu" optionaltext="hide">
    <option value="item1">Select menu item one</option>
    <option value="item2">Select menu item two</option>
    <option value="item3">Select menu item three</option>
</bolt-select>

<bolt-select label="Fund name" width="20">
    <option value="item1">Nationwide AllianzGI International Growth Fund</option>
    <option value="item2">Nationwide Bailard International Equities Fund Equity Funds</option>
    <option value="item3">Nationwide Global Sustainable Equity Fund</option>
</bolt-select>

<bolt-select label="Fund name" width="fit-content">
    <option value="item1">Nationwide AllianzGI International Growth Fund</option>
    <option value="item2">Nationwide Bailard International Equities Fund Equity Funds</option>
    <option value="item3">Nationwide Global Sustainable Equity Fund</option>
</bolt-select>

<bolt-select label="Fund name" placeholder="Choose one">
    <option value="item1">Nationwide AllianzGI International Growth Fund</option>
    <option value="item2">Nationwide Bailard International Equities Fund Equity Funds</option>
    <option value="item3">Nationwide Global Sustainable Equity Fund</option>
</bolt-select>

<bolt-select label="Select menu name">
    <bolt-contextual-help slot="help" heading="Help text heading">
        <p>Help text body content</p>
    </bolt-contextual-help>
    <option value="item1">Select menu item one</option>
    <option value="item2">Select menu item two</option>
    <option value="item3">Select menu item three</option>
</bolt-select>

The <bolt-select> custom element creates a select menu with a label and optional error and hint text. The "Select" option text is present as part of the custom element; it should not be passed as an option.

<bolt-select label="Choose an option">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</bolt-select>

The <bolt-select> element must include one of these three parameters:

• label: The label text for the input. This generates a visible <label> element associated with this <select>.
• arialabel: Sets the aria-label attribute of the underlying <select> element.
• arialabelledby: Sets the aria-labelledby attribute of the underlying <select> element.

Additionally, The <bolt-select> element supports the following parameters:

• value: optional. The value for the input, which must be a string. The value attribute will not accept an object.
• required: optional. If present, the field is required. Fields that are not required will show "(optional)".
• optionaltext: optional. show (default) or hide. Use to remove the "(optional)" text from non-required fields.
• disabled: optional. If present, disables rendered interactive elements.
• error: optional. The error message to display below the input.
  • Should not be used when component is disabled.
  • For slotted field error see select error slot
• width : optional. full (default) spans the entire width of the container. fit-content sets the width of the select box based on its longest option. A numerical value sets width in terms of average character widths.
• invalid: optional. If present, the field appears invalid.
• placeholder: optional. Defaults to "Select", but text can be customized.
• placeholdervalue: optional. Defaults to empty string.
• datatestselect optional property to configure the data-test value on the underlying <select> element. Default is select.

The <bolt-select> element supports the use of <bolt-contextual-help> via the help slot placeholder. For more information and to see other options visit the contextual help page.

• [data-test="select"] targets primary <select> element
  • Configurable via the datatestselect property

• Select is used for selecting one item from a list of between 6 and 15 items. Avoid overwhelming users with too many options.
• Order the options in a Select logically.
• Only if a deliberate selection is required or if no option can be defaulted, should a Select display the placeholder text "Select" before a user interacts with it. Otherwise, any available option can be set as the Select's default.
• Combine a Select with a field label for context and the best accessibility. A field label is not needed when the component is used in a table. (e.g. where a column header provides accessible context.)
• When a screen does not provide enough space for a user to see the full text of an option, place the text, in full, below the Select to let the user know what they have chosen.
• Input validation and error messaging for a Select should only occur after a user submits a form.
• Select should never be in both error and disabled states at the same time.

• When a user needs to choose one option from a simple list of 6 or more options.
• Use Select if space constraints don't allow a large number of radio buttons to be used for selecting one option.

• Avoid using a Select when typing may be faster.
• Avoid if all options are required to be displayed concurrently.

• Avoid Select when displaying more than 15 options; consider using a Text field or Autocomplete, especially if filtering would be beneficial.
• Consider an alternative pattern when options are links navigating users to various places.
• Consider using Radio button for a list between 2 and 5 predefined options when space is available.
• Use Radio button instead of Select for a single boolean option.
• Use Switch for a binary decision where the input can be recorded or updated immediately.
• Use Checkbox for user confirmation (e.g., "I agree to…" or "I have read…") instead of Select.

• Select field labels and items use sentence case.
• Error messages use sentence case and include a period.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.