Select

The select component provides styled dropdown menus for single-selection form inputs when users need to choose from a predefined list of options. Use select dropdowns when you have more than 7–8 options, when space is limited, or when options are well-known to users. The component supports option groups, validation states, and accessibility features to ensure consistent form experiences across all GNWT applications.

Do

  • Use clear, descriptive labels that explain what users are selecting from the dropdown menu.
  • Include a default "Select" option to prompt users and avoid accidental selections from the first item.
  • Order options logically such as alphabetical, chronological, or by frequency of use for better usability.
  • Group related options using optgroups when you have many choices that fall into clear categories.
  • Provide helpful option text that clearly differentiates each choice without being overly verbose.
  • Test keyboard navigation to ensure all options are accessible using arrow keys and Enter.
  • Include validation messaging for required select fields to guide users toward completion.
  • Consider mobile experience where select dropdowns use native mobile interfaces for better usability.

Don’t

  • Don’t use select dropdowns for few options — use radio buttons when you have 2–7 choices for better visibility.
  • Don’t make option text too long — keep labels concise while remaining descriptive and scannable.
  • Don’t forget the default option — always include a prompt option to prevent accidental selections.
  • Don’t use unclear option labels — avoid abbreviations or jargon that users might not understand.
  • Don’t ignore option ordering — random or illogical ordering makes it harder for users to find their choice.
  • Don’t use select for binary choices — yes/no decisions are better served by radio buttons or checkboxes.
  • Don’t make select fields too narrow — ensure dropdown width accommodates your longest option text.
  • Don’t use generic validation messages — provide specific feedback that relates to the actual selection being made.

Standard Select Dropdown

Basic select dropdown for reason selection with clear labeling and validation. Demonstrates proper default option, logical option ordering, and required field handling. Use this pattern for category selection, preference choices, or any single-selection scenario with multiple options.

Open example in a new tab

Accessibility Best Practices

Screen Reader Support

  • Descriptive labels: Each select element has a clear, specific label that describes the expected selection.
  • Required field indication: Required select fields are properly marked with required attribute and announced to screen readers.
  • Option clarity: All option text is descriptive and provides clear context for the choice being made.
  • Default option guidance: The default "Select" option provides clear instruction without being selectable as a valid choice.

Keyboard Navigation

  • Full keyboard access: Select dropdowns are accessible via Tab key navigation and arrow keys for option selection.
  • Arrow key navigation: Users can navigate through options using up/down arrow keys when dropdown is focused.
  • Enter key selection: Users can select options using Enter key or close dropdown with Escape.
  • Type-ahead functionality: Users can type letters to quickly jump to options starting with those characters.

Visual Accessibility

  • High contrast ratios: All select text, borders, and dropdown indicators meet WCAG AA contrast requirements.
  • Clear focus states: Focused select elements have distinct visual indicators for keyboard navigation.
  • Adequate sizing: Select dropdowns meet minimum touch target sizes (44px) for mobile accessibility.
  • Error state styling: Invalid selects use multiple visual cues (color, borders, icons) to indicate validation problems.

Content Guidelines

  • Clear selection prompts: Use descriptive default options like "Select your reason" rather than generic "Choose one".
  • Specific option labels: Write option text that clearly explains each choice without ambiguity.
  • Logical grouping: When using optgroups, ensure categories are meaningful and mutually exclusive.
  • Consistent terminology: Use similar language patterns and vocabulary across all select options.

Implementation Considerations

  • Form validation: Implement proper validation for required select fields with clear error messaging.
  • Option management: Consider how options will be maintained and updated over time in your content management system.
  • Performance: For very large option lists, consider search functionality or progressive loading.
  • Mobile optimization: Test select behavior on mobile devices where native interfaces may differ from desktop.

ARIA Attributes in Use

  • aria-required="true" — Indicates when select field selection is required for form submission.
  • aria-invalid="true" — Applied to select fields when validation fails to indicate errors.
  • aria-describedby — Connects select fields to help text or error messages when additional context is needed.
  • aria-label — Provides additional context when select labels alone might be insufficient.
Mis à jour: 02 décembre 2025