Select

The Select component allow user to click and select from a list of options.

Default

Presents a classic dropdown menu or equivalent picker as determined by users’ browsers.

Optional

Use optional indicator to let users know that a selection isn't required.

Optional

Error

Use to let users know if there’s a problem with their selection. For selects, a selection is typically invalid only when using a placeholder option (“Select”) and no other selection has been made.

Disabled

Use for selections that aren’t currently available. The surrounding interface should make it clear why the select box is disabled and how to activate it.

Props

  • label string

    Label for the select

  • placeholder string

    Example text to display as placeholder

  • optionalIndicator boolean

    Visual optional indicator, add an 'optional' badge to the label

  • labelHidden boolean

    Visually hide the label

  • disabled boolean

    Disable input

  • error boolean | Error

    Display an error state