Select

Allows users to select one or more values from a list.

Props#

Select renders a Menu and accepts all of it's props. See: Chakra UI docs

Prop	Type	Default	Description
name`required`	`string`		The name of the input field in a native form.
arrowPadding	`number`	`8`	The padding required to prevent the arrow from reaching the very edge of the popper.
autoSelect	`boolean`	`true`	If `true`, the first enabled menu item will receive focus and be selected when the menu opens.
boundary	`HTMLElement \| "clippingParents" \| "scrollParent"`	`clippingParents`	The boundary area for the popper. Used within the `preventOverflow` modifier
children	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`
closeOnBlur	`boolean`	`true`	If `true`, the menu will close when you click outside the menu list
closeOnSelect	`boolean`	`true`	If `true`, the menu will close when a menu item is clicked
colorScheme	`"whiteAlpha" \| "blackAlpha" \| "gray" \| "red" \| "orange" \| "yellow" \| "green" \| "teal" \| "blue" \| "cyan" \| "purple" \| "pink" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram" \| "primary" \| "secondary" \| "indigo"`		The visual color appearance of the component
computePositionOnMount	`boolean`
defaultIsOpen	`boolean`
defaultValue	`NonNullable<Value>`		The initial value of the select field.
direction	`"ltr" \| "rtl"`		If `rtl`, proper placement positions will be flipped i.e. 'top-right' will become 'top-left' and vice-verse
eventListeners	`type ONLY_FOR_FORMAT = \| boolean \| { scroll?: boolean \| undefined resize?: boolean \| undefined }`	`true`	If provided, determines whether the popper will reposition itself on `scroll` and `resize` of the window.
flip	`boolean`	`true`	If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
gutter	`number`	`8`	The distance or margin between the reference and popper. It is used internally to create an `offset` modifier. NB: If you define `offset` prop, it'll override the gutter.
id	`string`
initialFocusRef	`RefObject<{ focus(): void }>`		The `ref` of the element that should receive focus when the popover opens.
isDisabled	`boolean`		If `true`, the select will be disabled.
isLazy	`boolean`	`false`	Performance 🚀: If `true`, the MenuItem rendering will be deferred until the menu is open.
isOpen	`boolean`
lazyBehavior	`LazyMode`	`unmount`	Performance 🚀: The lazy behavior of menu's content when not visible. Only works when `isLazy={true}` - "unmount": The menu's content is always unmounted when not open. - "keepMounted": The menu's content initially unmounted, but stays mounted when menu is open.
matchWidth	`boolean`	`false`	If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
modifiers	`Partial<Modifier<string, any>>[]`		Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
multiple	`Multiple`		Enable multiple select.
offset	`[number, number]`		The main and cross-axis offset to displace popper element from its reference element.
onChange	`(value: Value) => void`		The callback invoked when the value of the select field changes.
onClose	`() => void`
onOpen	`() => void`
options	`FieldOptions<SelectOption>`		An array of options If you leave this empty the children prop will be rendered.
placeholder	`string`		The placeholder text when there's no value.
placement	`PlacementWithLogical`	`bottom`	The placement of the popper relative to its reference.
preventOverflow	`boolean`	`true`	If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
renderValue	`(value: Value) => ReactNode`		The function used to render the value of the select field.
size	`"lg" \| "md" \| "sm" \| "xs"`	`md`	The size of the Select
strategy	`"fixed" \| "absolute"`	`absolute`	The CSS positioning strategy to use.
value	`NonNullable<Value>`		The value of the select field.
variant	`"outline" \| "filled" \| "flushed" \| "unstyled"`	`outline`	The variant of the Select

Was this helpful?