Select

The Select component allows you to choose one or multiple options from a collapsed dropdown with options.

OverviewPropertiesUsage

SelectFormsProps

Signature:

declare type SelectFormsProps<, extends > = <, > & < extends true ? <> : <>, (value: <, >) => > & & & & ;

Prop Table did not receive data

Select base components

Select.Content

The Select.Content wraps all the custom content of the overlay, including the options, groups, and group labels.

SelectContentProps

Signature:

declare type SelectContentProps = <> & & & { /** * The current loading state of the Select.Content. If true, a loading icon is shown. * @defaultValue false */ loading?: ; /** * The width of the Select.Content (overlay). By default it has a min-width of 96px and adjusts to the size of the trigger. * @defaultValue */ width?: ; /** * Whether the selected options are reordered to the top of the options. * @defaultValue false */ showSelectedOptionsFirst?: ; };

Select.Prefix

The Select.Prefix component can only be used inside the Select.DisplayValue component or the Select.Option component.

SelectPrefixProps

Signature:

declare type SelectPrefixProps = <> & & ;

Select.Suffix

The Select.Suffix component can only be used inside the Select.DisplayValue component or the Select.Option component.

SelectSuffixProps

Signature:

declare type SelectSuffixProps = <> & & ;

Select overlay components

Select.Option

Every option of the select is represented by the children of the Select.Option component.

SelectOptionProps

Signature:

declare type SelectOptionProps<> = & & & { value: ; textValue?: ; id?: ; ?: ; disabled?: ; };

Select.Group

The Select.Group component can be used to add groups to the Select component.

SelectGroupProps

Signature:

declare type SelectGroupProps = <> & & ;

Select.GroupLabel

When using groups inside the Select component, you can name each group by adding a Select.GroupLabel component with a suitable title.

SelectGroupLabelProps

Signature:

declare type SelectGroupLabelProps = <> & & ;

Select.Filter

SelectFilterProps

Signature:

declare type SelectFilterProps = & & { /** * Flag indicating if the client-side filtering should be disabled or not. * @defaultValue false **/ disableFiltering?: ; /** Defines the default filter . */ defaultValue?: ; /** Defines the filter value. */ value?: ; /** The callback is triggered when the filterValue changes. */ onChange?: (filterValue: ) => ; };

Select.EmptyState

SelectEmptyStateProps

Signature:

declare type SelectEmptyStateProps = <> & & ;

Select trigger components

Select.Trigger

The Select.Trigger component is used to render the trigger that opens or closes the overlay.

SelectTriggerProps

Signature:

declare type SelectTriggerProps = & & & { /** * The placeholder text displayed in the Select.Trigger. */ placeholder?: ; /** * The width of the Select.Trigger. * @defaultValue */ width?: ; };

Select.DisplayValue

SelectDisplayValueProps

Signature:

declare type SelectDisplayValueProps = <>;

Select.CustomTrigger

SelectCustomTriggerProps

Signature:

declare type SelectCustomTriggerProps = ;