Skip to main content
Official website. How you know

Official websites use .gov

A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS

A lock or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Digital Design System

Drop-down select

A drop-down select component allows users to choose one option from a drop-down menu. Use this component for lists of two to 15 items. For larger lists, see combo-box.

Overview

The component contains a title, optional subtitle, and drop-down container with up to 15 options.

Default

Drop-down title is black text, subtitle text is smaller in light gray font, followed by a white rectangle with a gray outline and placeholder text Select option in dark gray. A down-facing caret icon is on the right side of the rectangle.

Opened

The background of the drop-down select rectangle becomes light blue. The carat becomes an up-facing carat. A light grey rectangle container extends from the bottom of the drop-down select box. Six options for the user to select are visible in the container.

Selected

The text changes from Select option to the selected value and becomes black.

Error

The background of the entire container that includes the title, subtitle, and drop-down select box turns red. The red inside the drop-down select box is lighter than the red of the container. An error message appears below the subtitle text. The placeholder message is Why is there an error and how to fix it. To the left of this message there is a red icon of an exclamation point in a circle.

Disabled

The drop-down select box changes to a light gray background with dark gray text and outline.

Usage context

When to use

Use the drop-down select component when the user is being asked to select just one item from a list of two to 15 items.

In general, favor drop-downs in contexts where space is limited. If you have space, use radio buttons for single-select experiences instead.

When to use something else

Don’t use the drop-down select component in the following situations:

  • When there are only two options (use radio buttons instead)
  • When the user is being asked to select one of a list of more than 15 options (use a combo-box instead)
  • When the user is being asked to select more than one option from a list (use checkboxes instead)

Usage guidelines

The list modal appears below the select field when the user clicks. Only six options are shown at once, regardless of screen size.

  • NYC webpage with the question what best describes you? To the right of this is an open drop-down menu, with six options visible.
  • NYC App with a heading the reads; what best describes you? Below this is a drop-down select component with six options visible.

Drop-down select

The dropdown component can be utilized with an nyc-field class container, with the following items:

  • Label element: This acts as the button
  • Select input element: Contained within the label
  • Subtitle element (optional): .subtitle: Provides additional context for the dropdown. This should be placed between the label and select elements.
This code is for reference only. The library is currently in beta. Check back for future releases.
Subtitle text
Subtitle text
This field is required.
Subtitle text 
<form class="code-examples">

  <div class="nyc-field">
    <label for="example-default-select">Default Dropdown Label</label>
    <span class="subtitle">Subtitle text</span>
    <select id="example-default-select">
      <option value="">-- Select option --</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>

  <div class="nyc-field nyc-field--error">
    <label for="example-error-select">Error Dropdown Label</label>
    <span class="subtitle">Subtitle text</span>
    <div class="error-message"><i class="i-ph:warning-circle-bold"></i>This field is required.</div>
    <select id="example-error-select">
      <option value="">-- Select option --</option>
      <option value="1">Option 1</option>
    </select>
  </div>

  <div class="nyc-field">
    <label for="example-disabled-select">Disabled Dropdown Label</label>
    <span class="subtitle">Subtitle text</span>
    <select id="example-disabled-select" disabled>
      <option value="">-- Disabled --</option>
    </select>
  </div>
    
</form>