Select

Component Description

The browser-native select control component allows users to choose one option from a list of options. It is commonly used in forms for selecting values from a predefined set of options. This component is a wrapper for the browser-native select control and largely exists to provide a consistent API across browsers, especially on mobile devices.

Design Spec

Link to Design Spec in Figma

Engineering Spec

Inputs

• @attr appearance: "outline" "underline" "filled-darker" "filled-lighter" | "outline"
• @attr component-size: "small" "medium" "large" | "medium"
• @attr disabled: boolean
• @attr required: boolean
• @attr name: string
• @attr autofocus: boolean
• @attr autocomplete: "on" "off" | "off"
• @attr aria-label: string
• @attr aria-labelledby: string
• @attr aria-describedby: string
• Use ARIAGlobalStatesAndProperties from @microsoft/fast-foundation
• No @attr for multiple as it is not supported in the Fluent React implementation

Outputs

None

Events

• @input: Fires whenever the value of the select has been changed
• @change: Fires whenever the user modifies the value of select
• Note: These will not be the native events, but will be custom events that bubble

Slots

• default: The dfeault for option and optgroup elements. As these are the only elements supported in the native select control, we will filter out any other elements that are slotted.
• icon: the icon, typically a down arrow
• label: the label for the select, optional
• Example usage for default slot
  HTMLCopy

  <fluent-select>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <optgroup label="Group 1">
      <option value="option3">Option 3</option>
      <option value="option4">Option 4</option>
    </optgroup>
  </fluent-select>
  

CSS Variables

None

Accessibility

• Find the matching component through WCAG's patterns: https://www.w3.org/WAI/ARIA/apg/patterns/
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
• Are there any accessibility elements unique to this component?
• List ARIA attributes
  • @attr aria-label: string
  • @attr aria-labelledby: string
  • @attr aria-describedby: string
  • Use ARIAGlobalStatesAndProperties from @microsoft/fast-foundation
• Does the component support 400% zoom?
• What keyboard behaviors does the component support?
  • Up / Down : Moves focus between options
  • Space / Enter: Selects the focused option
  • Home : Sets focus to the first option
  • End : Sets focus to the last option
  • Esc : Closes the dropdown list if it is open
  • Page Up / Down : Moves focus between options

Preparation

• Find the base FAST Component this component will inherit from and document
  • This will be a wrapper for the browser-native select control and does not have a corresponding FAST component
• Check the Fluent UI React V9 Component Spec for differences and document
  • No spec available
• Fluent UI React V9 Storybook for implementation differences and document
  • Fluent React V9 Select
  • size attribute renamed to component-size to not conflict with the HTML size attribute
• Open GitHub issues related to component
  • Select
• (Optional) Draft implementation
  • [link to draft implementation, if applicable]
• Component Spec authored
  • And reviewed

Implementation

• Initial conformance and unit tests (validate basic functionality)
• Initial documentation
  • Storybook stories
  • README.md covering basic usage
• Uses design tokens for styling
• Renders correctly in High Contrast mode

Validation

• Add tests
  • Unit and conformance tests
  • Bundle size fixtures
  • Performance test scenario
  • Accessibility behavior tests
  • Create an issue and run manual accessibility tests: [link to issue]
• Validate with partners
• Finalize documentation
  • Review and add any missing Storybook stories
  • Finalize migration guide
  • In package.json: Remove the alpha/beta tag from the version number in package.json
  • In package.json: Change beachball's disallowedChangeTypes to "major", "prerelease"