Selects

Select are typeable inputs with selectable dropdown items. Selects Design Guidelines.

Edit the code below to see your changes live!

API

Select

Prop Name
Type
Default
Description
actionSelectAction

Action option displayed at the end of the list.

descriptionstring | FormControlDescription

Append a description to the select field.

disabledbooleanfalse

Disables the Select component.

errorstring

Displays a form error around the field.

filterablebooleantrue

Allows you to filter the SelectOptions in the Select.

inputRefReact.Ref<HTMLInputElement> | React.RefObject<HTMLInputElement>

The provided ref will be used for the underlying input element used in the Select.

labelstring

Adds a label to the field.

labelIdstring

Adds a custom id to the label.

maxHeightnumber250

Sets a max-height to the dropdown.

onOptionChange *(value: any, option: SelectOption) => void

Callback called with value of selected option.

options *Array<SelectOption> | Array<SelectOptionGroup>

Accepts an array of SelectOptions or an array of SelectOptionGroups. See examples for usage.

placementauto-start | auto | auto-end | top-start | top | top-end | right-start | right | right-end | bottom-end | bottom | bottom-start | left-end | left | left-startbottom-start

Determines the location in which the dropdown will be placed.

positionFixedbooleanfalse

If set, uses position: fixed instead of position: absolute to position the list.

requiredboolean

Sets the field as required.

valueany

Modifies the current selected value of the field.

Props ending with * are required

SelectOption

Prop Name
Type
Default
Description
disabledbooleanfalse

Sets the SelectOption to disabled.'

content *string

'Sets the text content of the SelectOption.'

iconIcon

Pass in an Icon component to display to the left of the text. Only available for single select.

value *any

'Stored value of the SelectOption.'

Props ending with * are required

SelectAction

Prop Name
Type
Default
Description
actionTypenormal | destructivenormal

'Indicates whether the SelectAction is of normal or destructive nature.'

disabledbooleanfalse

'Sets the SelectAction to disabled.'

content *string

'Sets the text content of the SelectAction .'

iconIcon

Pass in an Icon component to display to the left of the text.

onClick(inputText: string): void

Returns the current text in the input.

Props ending with * are required

SelectGroup

Prop Name
Type
Default
Description
label *string

Adds a label to the option group.

options *Array<SelectOption>

Accepts an array of SelectOption. See example for usage.

Props ending with * are required

Examples

Position

Select can be anchored in different directions with the position property. It will automatically find a position if there's not enough space in the chosen direction.

Edit the code below to see your changes live!

Max Height

Once the content is longer than the max-height, the Dropdown will be scrollable. It is possible to modify the dimension by passing a maxHeight property.

Edit the code below to see your changes live!

Disabled

It is possible to disable the entire select component, similar to how you would disable a native HTML select element, by using the disabled property.

Edit the code below to see your changes live!

Action

Accepts an action object to display at the end of the list.

Edit the code below to see your changes live!

Error

An error prop receives a string to display.

Need to choose a country before proceeding

Edit the code below to see your changes live!

Select Groups

It is possible to create grouped options with labels with a Select Group by passing label and options to the top-level options property.

Edit the code below to see your changes live!

Beta