Skip to main content

Select (Dropdown)

The select component, often called a dropdown, allows users to choose one option from a predefined list. It is an essential form element that provides a compact way to present numerous choices without cluttering the page.

When implemented correctly a select component is a user-friendly and accessible way to handle user input. Use a select when you have between seven and 15 options. For fewer than seven options consider using radio buttons as they make all choices immediately visible. For more than 15 options a select can become difficult to navigate. Consider an autocomplete field instead.

Why the select component is important:

  • Saves space: Displays options only when needed, keeping forms compact
  • Organizes choices: Presents multiple options in a clear, structured way
  • Reduces errors: Limits input to predefined valid options
  • Simplifies selection: Users choose from a list rather than typing free-form text

IKN Select


Anatomy and Visual Specifications

The select component consists of several key parts that work together to create an intuitive experience.

  1. Label:  Text that clearly describes the information the user should provide.
  2. Select Input: The main field that displays the currently selected option or placeholder text. This is the primary interactive element.
  3. Dropdown Icon: A downward-facing arrow on the right side of the input field. It provides a visual cue that the element is interactive and will reveal a list of options.
  4. Hint Text (Optional): Supplemental text placed below the label to provide additional context or instructions.
  5. Option List: The menu of choices that appears when a user clicks the select input.

Consistent styling ensures that select components are predictable and easy to use across the website.

  • Default State: The component has a 1px solid gray border. The background is white and the text is a dark gray for readability. The dropdown icon is also dark gray.
  • Hover State: When a user hovers over the select input with a mouse the border color darkens slightly to provide feedback that the element is interactive.
  • Focus State: For accessibility the select input must have a highly visible focus state. When a user navigates to the component using a keyboard or clicks on it a 2px solid blue outline (#0D76AD) appears around the entire component. This outline is a critical visual indicator for keyboard and screen reader users.
  • Disabled State: A disabled select component is not interactive. It has a light gray background and border. The text and icon have lower color contrast to signify its inactive state. Users cannot focus on or interact with a disabled select.
  • Error State: If the select is part of a form and the input is invalid it enters an error state. The border becomes 2px solid red. An error message appears below the field explaining the error and how to correct it.

Accessibility and Implementation Guidance

Adhering to accessibility best practices is mandatory. The following guidelines ensure the select component is usable by everyone including people who rely on assistive technologies.

  • Always Use a Label. Every select must have a corresponding < label > element. The for attribute of the label must match the id of the < select > element. This programmatic link is essential for screen reader users who need to know the purpose of the form control.
  • Provide Clear Instructions. If a selection is required or if there are specific formatting rules use hint text to provide clear instructions. Do not rely on placeholder text inside the select input as a label because it disappears once a user makes a selection. If a placeholder is needed use a disabled first option like < option value="" disabled selected >Please select one< /option >.
  • Support Keyboard Navigation. Users must be able to operate the select component entirely with a keyboard.
  • Tab: Moves focus to the select component.
  • Spacebar or Enter: Opens or closes the option list.
  • Up and Down Arrow Keys: Navigate through the available options when the list is open.
  • Typing a Letter: Jumps to the first option in the list that starts with that letter.
  • Escape: Closes the option list without changing the current selection.
  • Communicate Errors Clearly. When a validation error occurs do not rely on color alone to indicate the problem. The error state must include a descriptive error message linked to the select input using the aria-describedby attribute. This ensures that screen readers announce the error message when the user focuses on the invalid field.

Additional Specifications

For any additional information about specifications, colors, styling, guidelines, accessibility and usage, please refer to the Select component on the USWDS website:

USWDS - Select