Select

The select component allows users to make single or multiple selections from a pre-defined list of options.

Props

NameTypeDescriptionDefault
defaultValuestring | string[]Initial value of the select, only when it is uncontrolled.-
valuestring | string[]Value of the select. If undefined, the component will be uncontrolled and the value will be managed internally by the component.-
labelstringText to be placed above the select.-
namestringName attribute of the input element. This attribute will allow users to find the component's value during the submit event. In this event, the component's value will always be a regular string, for both single and multiple selection modes, being a single option value in the first case and more than one value when multiple selection is available, separated by commas.-
Required
options
({ label: string, value: string, icon: (string | React.ReactNode & React.SVGProps <SVGSVGElement>) })[] | ({ label: string, options: Option[] })[]An array of objects representing the selectable options. Each object has the following properties depending on whether it is a regular option or a group:

Option
  • label: Label of the option to be shown in the select's listbox.
  • value: Value of the option. It should be unique and not an empty string, which is reserved to the empty option added by optional prop.
  • icon: Material Symbol name or SVG element used as the icon for the option. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
Grouped options
  • label: Label of the group to be shown in the select's listbox.
  • options: List of Option instances.
-
helperTextstringHelper text to be placed above the select.-
placeholderstringText to be put as placeholder of the select.-
searchablebooleanIf true, enables search functionality.false
multiplebooleanIf true, the select component will support multiple selected options. In that case, value will be an array of strings with each selected option value.false
disabledbooleanIf true, the component will be disabled.false
optionalbooleanIf true, the select will be optional, showing '(Optional)' next to the label and adding a default first option with an empty string as value and the placeholder (if defined) as its label. Otherwise, the field will be considered required and an error will be passed as a parameter to the onBlur and onChange functions if an option wasn't selected.false
onChange(val: { value: string | string[]; error?: string }) => voidThis function will be called when the user selects an option. An object including the new value (or values) and the error (if the value selected is not valid) will be passed to this function. If there is no error, error will not be defined.-
onBlur(val: { value: string | string[]; error?: string }) => voidThis function will be called when the select loses the focus. An object including the value (or values) and the error (if the value selected is not valid) will be passed to this function. If there is no error, error will not be defined.-
errorstringIf it is a defined value and also a truthy string, the component will change its appearance, showing the error below the select component. If the defined value is an empty string, it will reserve a space below the component for a future error, but it would not change its look. In case of being undefined or null, both the appearance and the space for the error message would not be modified.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
size'small' | 'medium' | 'large' | 'fillParent'Size of the component.'medium'
tabIndexnumberValue of the tabindex attribute.0
refReact.Ref <HTMLDivElement>Reference to the component.-

Examples

Controlled

Uncontrolled

Error handling

Grouped options

Icons