Select

Single select allows users to make a single selection from a dropdown list of six or more items. Consider using radio buttons for fewer items.

On this page

Import

Default SelectNative

Loading preview
Open in Storybook

Two Lined

Loading preview
Open in Storybook

Props

Select Native Props

NameDescriptionDefault
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-
label

Text that's used as the visual and accessible label for the component. If not provided, hide the component's built-in label.

string		-
autoComplete

Must be defined when the form control collects user personal data. Attribute value must match the tokens defined in input purposes section.

string		-
name

Used when form is submitted to identify input element

string		-
required

Indicates whether a selection is required or not

boolean		-
value

The value of the select (controlled component).

string | number		-
onChange

The event handler for change events on any of the Native Select (controlled component).

ChangeEventHandler<HTMLSelectElement>		-
defaultValue

The default value of the select (uncontrolled component).

string		-
id*

Id to match the label htmlFor

string		-
lang

BCP 47 language tag, only required if component is in different language than the rest of the page.

string		-
aria-describedby

ID of element providing further context and description for the component

string		-
aria-labelledby

The id of a label, which provides an accessible name for the component Identifies the element (or elements) that labels the current element. @see aria-describedby.

string		-
children

Select text

ReactNode		-
status

Default, error, or success state. Will use the value provided by the context when wrapped in a FieldControl component.

FieldControlStatus		-
statusMessage

The status message to be displayed if status is 'success' or 'error'.

string		-
hint

Additional information for the select

string		-
isHintVisuallyHidden

If true, visually hides the hint text (it will still be accessible to screen readers)

boolean		-
isTwoLined

If true, styles two-lined select with inner label as the option value

boolean		-
reactlytics
ReactlyticsProp		-

Select Native Option Props

NameDescriptionDefault
children

Text with optional/additional description

ReactNode		-
value

The value associated with the option. Used by the SelectNative in onChange events.

string | number		-
twoLinedLabel

The extra label associated with the option value. Only rendered for two-lined select when the option is selected.

string		-
reactlytics
ReactlyticsProp		-
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean		-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.