Select allows users pick a value from predefined options. Ideally, it should be used when there are more than 2 options, otherwise you might consider using a radio group instead. Currently only supports native browser select.

Basic usage

If Select is controlled, you should specify an onChange handler and pass the value prop through. For uncontrolled, omit value and include an optional defaultValue

Custom Select
SelectMenu is also available to provide some custom UI

Props

Select
NameTypeDescription
errorbooleanError / Danger mode
classNamestring-
disabledbooleanDisabled input
labelTextstringGhost/floating label.
valuestringValue for select
defaultValuestringValue for uncontrolled
helperTextstringAdditional text to help guide user
onChangeFormEventHandler<HTMLSelectElement>Callback fired when the value is changed
size"small" | "medium" | "large"Size of input
includeEmptyOptionbooleanAdd an empty option if labelText / ghostLabel is present
isRequiredbooleanWhether the input is required
requiredIndicatorstringThe label for the required indicator (defaults to *)