animation
Description
The animation of the popover.
Type
"bottom" | "left" | "right" | "scale" | "top" | "none"Default
'scale'Select
Select is a component used for allowing a user to choose one option from a list.
Props
SelectProps
boundary
Description
The boundary area for the popper. Used within the preventOverflow modifier.
Type
HTMLElement | "clippingParents" | "scrollParent"Default
'clippingParents'closeDelay
Description
The number of delay time to close.
Type
numberDefault
200closeOnBlur
Description
If true, the popover will close when you blur out it by clicking outside or tabbing out.
Type
booleanDefault
truecloseOnEsc
Description
If true, the popover will close when you hit the Esc key.
Type
booleanDefault
truecloseOnSelect
Description
If true, the list element will be closed when value is selected.
Type
booleanDefault
truecolorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"containerProps
Description
Props for select container element.
Type
Omit<HTMLUIProps, "children">contentProps
Description
Props for select content element.
Type
Omit<MotionProps, "children">defaultIsOpen
Description
If true, the popover will be initially opened.
Type
booleandefaultValue
Description
The initial value of the select.
Type
stringduration
Description
The animation duration.
Type
number | MotionLifecycleProps<number>errorBorderColor
Description
The border color when the input is invalid.
Type
stringeventListeners
Description
If provided, determines whether the popper will reposition itself on scroll and resize of the window.
Type
type ONLY_FOR_FORMAT =
| boolean
| { resize?: boolean | undefined; scroll?: boolean | undefined }Default
truefieldProps
Description
Props for select field element.
Type
Omit<SelectFieldProps, "children">flip
Description
If true, the popper will change its placement and flip when it's about to overflow its boundary area.
Type
booleanDefault
truefocusBorderColor
Description
The border color when the input is focused.
Type
stringfooter
Description
The footer of the select content element.
Type
string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | FC<...>gutter
Description
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
Type
UIValue<number>Default
8header
Description
The header of the select content element.
Type
string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | FC<...>iconProps
Description
Props for select icon element.
Type
SelectIconPropsisDisabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falseisInvalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisLazy
Description
If true, the PopoverContent rendering will be deferred until the popover is open.
Type
booleanDefault
falseisOpen
Description
If true, the popover will be opened.
Type
booleanisReadOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falseisRequired
Description
If true, the form control will be required.
Type
booleanDefault
falseitems
Description
If provided, generate options based on items.
Type
SelectItem[]lazyBehavior
Description
The lazy behavior of popover's content when not visible. Only works when isLazy={true}
- unmount: The popover's content is always unmounted when not open.
- keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.
Type
LazyModeDefault
'unmount'listProps
Description
Props for select list element.
Type
Omit<SelectListProps, "children">matchWidth
Description
If true, the popper will match the width of the reference at all times.
It's useful for autocomplete, date-picker and select patterns.
Type
booleanDefault
falsemodifiers
Description
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Type
Partial<Modifier<string, any>>[]Docs
https://popper.js.org/docs/v2/modifiers/name
Description
The HTML name attribute used for forms.
Type
stringoffset
Description
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]onChange
Description
The callback invoked when value state changes.
Type
(value: string) => voidonClose
Description
Callback fired when the popover closes.
Type
() => voidonOpen
Description
Callback fired when the popover opens.
Type
() => voidopenDelay
Description
The number of delay time to open.
Type
numberDefault
200optionProps
Description
Props for select option element.
Type
Omit<OptionProps, "children" | "value">placeholder
Description
The placeholder of the select.
Type
stringplaceholderInOptions
Description
If true, include placeholders in options.
Type
booleanDefault
trueplacement
Description
The placement of the popper relative to its reference.
Type
UIValue<Placement>Default
'bottom'portalProps
Description
Props to be forwarded to the portal component.
Type
Omit<PortalProps, "children">Default
'{ isDisabled: true }'preventOverflow
Description
If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
Type
booleanDefault
truesize
Description
The size of the Select.
Type
"xs" | "sm" | "md" | "lg" | "xl"Default
"md"strategy
Description
The CSS positioning strategy to use.
Type
"fixed" | "absolute"Default
'absolute'value
Description
The value of the select.
Type
stringvariant
Description
The variant of the Select.
Type
"filled" | "flushed" | "outline" | "unstyled"Default
"outline"Edit this page on GitHub