Select

How do you want to live?

Examples

The placeholder prop and helperText can both be used to provide additional context for the Select.

How do you want to live?

Choose your preferred living situation

Optionally use the value prop to control the selected option and onChange to update it.

How do you want to live?

If the isInvalid prop is set to true, the errorMessage contents will be displayed below the input field, replacing any helperText.

How do you want to live?

Required information

The isDisabled prop can be used on an individual option to make it unselectable.

How do you want to live?

The main select component, wraps the options and provides the select input.

Prop	Default	Description
`label`	-	`string` The label for the select field
`isInvalid?`	-	`boolean` If `true`, the select will be invalid
`isRequired?`	-	`boolean` If `true` the select will be required
`isDisabled?`	-	`boolean` If `true`, the select will be disabled
`helperText?`	-	`string` Text that provides additional guidance to the user
`errorMessage?`	-	`string` The error message to display if `isInvalid` is `true`
`onChange?`	-	`ChangeEventHandler<HTMLSelectElement>`
`placeholder?`	-	`string` The placeholder for the select. We render an `<option/>` element that has empty value. `<option value="">{placeholder}</option>`

A selectable option to be listed within the <Select />.

Prop	Default	Description
`value?`	-	`string \| number \| readonly string[]`
`isDisabled?`	-	`boolean`