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: <, >) => ; }> & ;

Prop Table did not receive data

Prop Table did not receive data

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 = ;