Single Select
This Select based on react-select library.
Select components are used for collecting user provided information from a list of options.
Select has two sizes with a different views: large (by default) and xLarge. Large size has label outside input, xLarge has label inside the input.
With Label
Large
Choose an option
xLarge
Choose an option
List options
Language
🇬🇧
English
🇬🇧
Language
English
Options Content
Large
Choose an option
xLarge
Choose an option
Hint message
Large
Informative message holderChoose an option
xLarge
Choose an option
Error
Large
Informative message holderChoose an option
xLarge
Choose an option
Disabled
Large
Choose an option
xLarge
Choose an option
Without label
Choose an option
Choose an option
List options width
Large
Choose an option
xLarge
Choose an option
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| size | large | xLarge | No | large | The option's value. |
| label | JSX.Element | string | No | - | Label title |
| placeholderSlot | JSX.Element | string | No | - | Placeholder |
| headerSlot | JSX.Element | No | - | Header element slot. |
| footerSlot | JSX.Element | No | - | Footer element slot. |
| menuWidth | number | No | _ | Options container width |
| leftSlot | JSX.Element | No | _ | Left content for selected option |
| leftSlot | JSX.Element | No | _ | Inform message under select |
| amountOfVisibleItems | number | No | _ | Set amount of visible options in multi select, all other will be hide under counter |
| isError | boolean | No | _ | Set valid/not valid select |
| isDisabled | boolean | No | _ | Is the select disabled |
| isMulti | boolean | No | _ | Support multiple selected options |
| isSearchable | boolean | No | _ | Whether to enable search functionality |
| closeMenuOnSelect | boolean | No | true | Close the select menu when the user selects an option |