Select
The Select component allows you to choose one or multiple options from a
collapsed dropdown with options.
SelectFormsProps
Signature:
declare type SelectFormsProps<, extends > = <, > & < extends true ? <> : <>, (value: <, >) => > & & & & ;SelectBaseProps
Signature:
declare type SelectBaseProps<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: <, >) => ;
}> & ;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 = ;