Skip to main content
Design system

Select

Avatar is a round container that holds a profile image to be used.

Bundle size: 11.19 kB
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { Select } from "@washingtonpost/wpds-ui-kit"
|Copy

Anatomy

  1. Selected value
  2. Label/placeholder
  3. Helper text (optional)
  4. Chevron icon (actionable)
  5. Border
  6. Check icon (indicates selected option)
  7. Options list
  8. Option hover state
  9. Option

Options

No styling options

The select component currently only supports one size and variant.


Behavior

Options list (Active)

Clicking or tapping the select field initiates the active state, revealing an options list that consists of a set of values. When in the active state, the label/placeholder is reduced in size and the chevron icon rotates 180 degrees, pointing upwards.

The options list may contain as many values as needed and becomes scrollable if there are more options than what is currently in view.

Making a selection (Active)

The options list can be navigated by mouse hover or via the up/down arrow keys (indicated by a faint highlight). clicking or tapping an option in the list will select the chosen value (indicated by the check icon)

Once a selection is made, the chosen value is displayed within the select field and the options list is automatically dismissed. Selection can also be achieved by pressing the Enter/Return key while an option is highlighted. to cancel selection/dismiss the options list, click or tap outside the element or press the Esc key.

Select groups

The options list can be segmented into groups. Grouping options within a select field can be helpful for creating categories or subcategories of similar items.

Text overflow

Overflow of the selected value is indicated by an ellipsis

Show required

Focus

Error

Success

Disabled


Accessibility

ARIA

Assistive technologies (e.g. screen readers) announce the element clearly to users, including its role, name and state.

Accessibility

The listbox position is adjusted (i.e. does not get cut off the screen).


API Reference

SelectRoot

PropDescriptionTypeDefaultRequired
childrenUsed to insert select elements into the root component
React.ReactNode
----False
defaultValueThe value of the select when initially rendered. Use when you do not need to control the state of the select. Uncontrolled value for the initial page shown
never
----False
disabledThe underlying input element disabled attribute
enum
boolean
----False
errorIndicates there is an error
enum
boolean
----False
errorMessageText displayed below the select to describe the cause of the error
React.ReactNode
----False
helperTextText displayed below the input to provide additional context
React.ReactNode
----False
onValueChangeEvent handler called when the value changes.
enum
((value: string) => void) | ((state: string) => void)
----False
requiredThe select element's required attribute
enum
boolean
----False
successIndicates there is a success
enum
boolean
----False
valueThe controlled value of the select. Should be used in conjunction with onValueChange Controlled value for the current page
never
----False

SelectGroup

PropDescriptionTypeDefaultRequired
childrenUsed to insert select elements into the root component
enum
ReactNode
----False
labelThe value of the select when initially rendered. Use when you do not need to control the state of the select.
string
----False
none
enum
boolean | true
----False

SelectItem

PropDescriptionTypeDefaultRequired
childrenUsed to insert select elements into the root component
enum
ReactNode
----False
disabled
enum
boolean
----False
valueThe value associated with this item
string
----
True
asChild
enum
boolean
----False
textValue
string
----False

SelectLabel

PropDescriptionTypeDefaultRequired
isFloating
enum
boolean | true
----False
isDisabled
enum
boolean | true
----False
childrenUsed to insert select elements into the root component
React.ReactNode
----False

SelectTrigger

PropDescriptionTypeDefaultRequired
childrenUsed to insert select elements into the root component
enum
ReactNode
----False
asChild
enum
boolean
----False
success
enum
boolean | true
----False
error
enum
boolean | true
----False
isInvalid
enum
boolean | true
----False
isDisabled
enum
boolean | true
----False