Select

Caution

The Select is deprecated. Please use the SelectV2 instead. The SelectV2 provides more features and will be maintained in the future.

The Select component allows you to choose one or multiple options from a collapsed dropdown with options. The name prop also needs to be specified for identifying the Select when submitting it in a form.

Import

import { Select } from '@dynatrace/strato-components-preview/forms';

Use cases

CodeSandbox

Control the state

The Select can also be controlled, meaning that you can handle the state. To do so, you need to use the onChange prop to provide a handler that is called when the internal state of the Select changes. You also need to assign the value from the state to the Select by setting the selectedId prop.

CodeSandbox

Pass large amounts of data

The Select can handle large amounts of options. If the content is too large to fit, the select options are virtualized.

CodeSandbox

Group options

The Select component allows grouping options into sections. You can nest your SelectOptions in a SelectSection component to achieve this.

CodeSandbox

Enable search

The Select component allows searching through options by enabling the hasFilter prop. This renders a search input, where you can type in the filtering term.

CodeSandbox

Use custom components as SelectOptions

If you are using a custom component as SelectOption, the text value of this option can't be determined automatically. To enable the search for these options and to show which option is selected, you have to provide a textValue representation of the option.

CodeSandbox

Enable multi-selection

The Select component allows multi-selection by enabling the multiple prop. This renders a checkbox for each option.

CodeSandbox

Add icons to options

The SelectOption component allows adding an icon with the prefixIcon.

CodeSandbox

Disable options

In the Select, you can disable each option separately. You need to assign the IDs of the options you want to disable to the diabledKeys prop as an array.

CodeSandbox

Render custom display values

In the Select, you can customize the rendered display values by passing a render function using the displayValue prop. If no option is selected, the placeholder set using the corresponding prop would be shown by default, but it can also be customized further using JSX. Notice that the clearable prop is used here to enable empty selection, as single select does not enable it by default. However, the multi select does enable it by default in order to have a closer API to that of the native select.

CodeSandbox

Validate

This example shows how you can validate the Select using the react-hook-form package, which handles error messages. For connecting the form with the Select and validating, you need to register the field with custom error messages and use the useForm hook from react-hook-form. Also, by using the controlState prop, you can override the error messages and connect the Select's error state and message to that of the form. This shows a hint in case of an error and applies proper styling to the component. You can also add custom validation logic when registering the Select by passing in a validate function to the register options.

CodeSandbox

Props

SelectProps

Signature:

export declare type SelectProps<T> = <T> & (<T> | );

SelectBaseProps

Signature:

export declare type SelectBaseProps<T> = <T> & { /** Selection mode of the component (single or multiple). */ multiple: ; } & (<T> | );

SelectBaseSharedProps

extends, , , ,

Name	Type	Default	Description
disabled?		false	Whether the component is disabled.
required?		false	Boolean to determine whether the component is required or not.
placeholder?		"Select an option"	Placeholder to show when no option is selected.
name?		-	Name used for the component when submitting it in a form.
form?		-	Form name used to connect the component to a form.
maxHeight?		-	Maximum height for the opened overlay in pixels.
displayValue?	<T>	-	Callback which enables custom rendering of the display value shown inside the Select button.
disabledKeys?	<>	-	Keys of the options that should be disabled.
hasFilter?		false	Whether the Select should enable filtering capabilities or not.
onFilterChange?	(filterValue: ) =>	-	Callback triggered when the filterValue changes.
defaultFilterValue?		''	Defines the default filter. The filterValue is controlled internally by the Select.
children	<<T>>	-	Children to render in the component. Must be a valid option.
clearable?		false	Shows the "Clear selection" option if set to true.

SelectBaseControlledProps

Name	Type	Default	Description
selectedId	|	-	Currently selected ids.
onChange	<T>	-	Callback triggered when the selected value changes.

SelectBaseUncontrolledProps

Name	Type	Default	Description
defaultSelectedId?	|	-	Default selected ids.
name		-	Name used for the component when submitting it in a form.

SelectControlledProps

Signature:

export declare type SelectControlledProps<T> = { /** Default selected ids. */ defaultSelectedId?: ; /** Currently selected ids. */ selectedId: | ; } & ({ /** Callback triggered when the selected value changes. */ onChange: <T>; /** * Selection mode of the component (single or multiple). * If set to true, selection mode is set to . * @defaultValue false */ multiple?: false; } | { /** Callback triggered when the selected value changes. */ onChange: <T>; /** Selection mode of the component (single or multiple). * If set to true, selection mode is set to . */ multiple: true; });

SelectUncontrolledProps

Name	Type	Default	Description
defaultSelectedId?	|	-	Default selected ids.
name		-	Name used for the component when submitting it in a form.
multiple?		false	Selection mode of the component (single or multiple). If set to true, selection mode is set to 'multiple'.