SelectV2

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

OverviewPropertiesUsage

SelectV2Props

Signature:

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

_SelectV2BaseProps

Signature:

export declare type _SelectV2BaseProps<T, extends > = <{ /** * Used to compare options with objects for values either by a specified property of the object or through a comparator function. */ compareBy?: keyof T | ((valueA: T, valueB: T) => ); /** Name used for the component when submitting it in a form */ name?: ; /** Form name used to connect the component to a form */ form?: ; /** * Boolean to determine whether the component is required * * @defaultValue false */ required?: ; /** * Whether the component is disabled * * @defaultValue false */ disabled?: ; /** * Event handler called when the open state for the select changes */ onOpenChange?: (isOpen: ) => ; /** * Whether or not the select allows multiple selection or not * @defaultValue false */ multiple?: ; /** * Whether or not the select is clearable. * @defaultValue false for single select, true for multi select */ clearable?: ; /** Callback that is called when the select trigger loses focus. */ onBlur?: (e: <, >) => ; /** Callback that is called when the select trigger gets focus. */ onFocus?: (e: <, >) => ; }> & ;

SelectValueControlledProps

Name	Type	Default	Description
value	extends true ? <> : <>	-
onChange	(value: <, >) =>	-

SelectValueUncontrolledProps

Name	Type	Default	Description
onChange?	(value: <, >) =>	-
defaultValue?	extends true ? <> : <>	-

SelectV2 base components

SelectV2.Content

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

SelectV2ContentProps

Signature:

export declare type SelectV2ContentProps = <> & & & { /** * The current loading state of the Select.Content. If true, a loading icon is shown. * @defaultValue false */ loading?: ; /** * The width of the SelectV2.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?: ; };

SelectV2.Prefix

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

SelectV2PrefixProps

Signature:

export declare type SelectV2PrefixProps = <> & & ;

SelectV2.Suffix

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

SelectV2SuffixProps

Signature:

export declare type SelectV2SuffixProps = <> & & ;

SelectV2 overlay components

SelectV2.Option

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

SelectV2OptionProps

Signature:

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

SelectV2.Group

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

SelectV2GroupProps

Signature:

export declare type SelectV2GroupProps = <> & & ;

SelectV2.GroupLabel

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

SelectV2GroupLabelProps

Signature:

export declare type SelectV2GroupLabelProps = <> & & ;

SelectV2.Filter

SelectV2FilterProps

Signature:

export declare type SelectV2FilterProps = & & { /** * 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: ) => ; };

SelectV2.EmptyState

SelectV2EmptyStateProps

Signature:

export declare type SelectV2EmptyStateProps = <> & ;

SelectV2 trigger components

SelectV2.Trigger

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

SelectV2TriggerProps

Signature:

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

SelectV2.DisplayValue

SelectV2DisplayValueProps

Signature:

export declare type SelectV2DisplayValueProps = <>;

SelectV2.CustomTrigger

SelectV2CustomTriggerProps

Signature:

export declare type SelectV2CustomTriggerProps = ;