Ethereal Garden

Select

Displays a list of options for the user to select from, with a dropdown trigger button.

When To Use

Use the Select component when you need to:

  • Allow users to choose a single option from a list of predefined choices
  • Conserve space in forms where dropdown selection is more appropriate than radio buttons
  • Display a list of options that might be too long for radio buttons
  • Provide a familiar selection pattern for form elements
  • Create a hierarchical selection interface with option groups

Select is best used when there's a predefined list of options and users need to select exactly one item from that list.

Examples

Basic

With Label

Select your local timezone for accurate scheduling.

Grouped Options

Disabled

Disabled Select

Select with Disabled Options

Props

PropTypeDefault
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-
PropTypeDefault
$$typeof
symbol
-
displayName?
string
-
propTypes?
any
-