Homecomponentsinput

Select

An expanding list of choices to select from.

The Select input is a component that allows users to pick a value from a set of predefined options. Ideally, it should be used when there are more than 5 options, otherwise it is recommended to use a radio group instead.

Some text check if dropdown is overflowing it correctly.

Open in Playroom

Size

Use size property to set the size of select input.

Open in Playroom

Label

Use label property to set the label.

Select a state

Open in Playroom

Label tip

Use tip property to add a tooltip next to label.

Select the biggest state

Open in Playroom

Secondary label for input

Use secondaryLabel property to set the alternative label.

Select a state

Open in Playroom

Long option label

Long label values would be truncated.

Open in Playroom

Placeholder

Use placeholder property to set the default placeholder for input.

W/o placeholder

Select a state

W/ placeholder + required

Select a state

W/ placeholder + not required

Select a state

Open in Playroom

Secondary label for option

Use SelectOption.secondaryLabel property to add a 2-nd label to the option.

Select the biggest state

Open in Playroom

Description

Use SelectOption.description property to add aditional text describing option.

Select the biggest state

Open in Playroom

You can use a custom element for description.

Select a service

Open in Playroom

Start icon of input and start icon of option

Use startIcon property to add an icon before the input label.
Use SelectOption.startIcon property to add an icon before the option label.
When an option with start icon is selected, this icon is displayed in place of input's start icon.

The "startIcon" is set only for input.

Select the biggest state

The "startIcon" is set only for options.

Select the biggest state

The "startIcon" is set both for input and options.

Select the biggest state

Open in Playroom

All Visible Feature

Following is the example of a Select with all the UI features.

Select the biggest state

Open in Playroom

Disabled

Use disabled to disable the select input.

Select a state

Open in Playroom

Error Message

Use errorMessage property to add an error message below the select input.

Select the biggest state

Wrong answer

Open in Playroom

API

name

Required

Name for the input.

string

options

Required

List of possible options.

SelectOption[]

onChange

Required

Callback when selection is changed.

(selected: string) => void

size

Size of the input.

small

regular

placeholder

Adds a default option with placeholder text to the list.

string

type

Multiple allows for more than 1 option to be selected.

multiple

single

disabled

Disables the input.

true

false

value

ID of the selected option.

string

onBlur

Action to perform when the field is blurred.

FocusEventHandler<HTMLButtonElement>

startIcon

Icon at the start of the input.

IconComponent

required

Indicates that the input is mandatory.

true

false

ID of the field.

string

label

Adds a label to the field.

string

tip

Tooltip shown next to the label.

string

secondaryLabel

Adds a secondary label to the field.

ReactNode

description

Note shown below the field.

string

errorMessage

Displays an error message under the field.

string

data

An object with the data keys and values.

DataAttributeMap

ref

Ref<HTMLButtonElement>

key

Key | null