select

63 notes in this subject, read out of this brain and free to use. This is page 1 of 2.

Select labelling with Label component

Use the Label component to offer a visual and accessible label for the select. Label can wrap the Select.Root or be separate with htmlFor attribute matching the Trigger's id.

Select controlled value example

To control what appears in the trigger, use value and onValueChange props on Select.Root and pass children to Select.Value. Example: const [value, setValue] = React.useState('france'); <Select.Root value={value} onValueChange={setValue}><Select.Trigger><Select.Value>{countries[value]}</Select.Value>...</Select.Trigger>...</Select.Root>

Select custom scrollbar with ScrollArea

The native scrollbar is hidden by default. To use a custom scrollbar, compose Select with the ScrollArea primitive by setting Select.Viewport asChild to wrap ScrollArea.Viewport, and include ScrollArea.Scrollbar and ScrollArea.Thumb parts.

Select unstable provider and bubble input

To recompose, move, or exclude the visually hidden select element for form submission, use unstable parts: Select.unstable_Provider (provides select state and accepts form/state props), Select.unstable_BubbleInput (the visually hidden select element, omit when form submission not needed). These parts are unstable and prefixed with unstable_, API may change in future releases.

Select.ItemIndicator purpose

Select.ItemIndicator renders when the item is selected. You can style this element directly, or use it as a wrapper to put an icon into, or both.

Select.Group purpose

Select.Group is used to group multiple items. It should be used in conjunction with Select.Label to ensure good accessibility via automatic labelling.

Select primitive overview

The Select primitive displays a list of options for the user to pick from, triggered by a button. It can be controlled or uncontrolled, offers 2 positioning modes, supports items, labels, and groups of items, has fully managed focus, full keyboard navigation, supports custom placeholder, typeahead support, and Right to Left direction support.

Select anatomy structure

The Select primitive consists of: Select.Root (contains all parts), Select.Trigger (button that toggles select), Select.Value (reflects selected value), Select.Icon (visual affordance), Select.Portal (portals content into body), Select.Content (pops out when select is open), Select.ScrollUpButton (scroll up affordance), Select.Viewport (scrolling viewport containing items), Select.ScrollDownButton (scroll down affordance), Select.Arrow (optional arrow element), Select.Item (contains select items), Select.ItemText (textual part of item), Select.ItemIndicator (renders when item is selected), Select.Group (groups multiple items), Select.Label (renders label of group), and Select.Separator (visually separates items).

Select.Root props

Select.Root accepts: defaultValue (string, optional, uncontrolled initial value), value (string, optional, controlled value used with onValueChange), onValueChange (function, optional, called when value changes), defaultOpen (boolean, optional, uncontrolled initial open state), open (boolean, optional, controlled open state used with onOpenChange), onOpenChange (function, optional, called when open state changes), dir (enum: 'ltr' or 'rtl', optional, reading direction, defaults to DirectionProvider or LTR), name (string, optional, submitted with form), disabled (boolean, optional, prevents interaction), required (boolean, optional, indicates user must select before form submission).

Select.Trigger data attributes

Select.Trigger supports data attributes: [data-state] with values 'open' or 'closed', [data-disabled] present when disabled, [data-placeholder] present when has placeholder.

Select.Value props

Select.Value accepts: asChild (boolean, optional, default false, changes rendered element), placeholder (ReactNode, optional, rendered when no value or defaultValue is set). The part reflects the selected value and by default renders the selected item's ItemText content. It should not be styled to ensure correct positioning.

Select.Icon default rendering

Select.Icon renders ▼ by default. It is a small icon often displayed next to the value as a visual affordance. You can use your own icon via asChild or children props.

Select.Portal props

Select.Portal accepts: forceMount (boolean, optional, forces mounting for animation control, inherited by Select.Content), container (HTMLElement, optional, default document.body, specifies container element to portal content into).

Select.Content positioning modes

Select.Content supports two positioning modes: position='item-aligned' (default, behaves like native MacOS menu by positioning content relative to active item) and position='popper' (positions content like Popover or DropdownMenu).

Select.Content props for popper positioning

Select.Content accepts: asChild (boolean, optional, default false), forceMount (boolean, optional), onCloseAutoFocus (function, optional, called when focus moves to trigger after closing), onEscapeKeyDown (function, optional, called when escape key is down), onPointerDownOutside (function, optional, called when pointer event occurs outside), position (enum: 'item-aligned' or 'popper', default 'item-aligned'), side (enum: 'top', 'right', 'bottom', 'left', default 'bottom', only for popper), sideOffset (number, default 0, distance from anchor in pixels, only for popper), align (enum: 'start', 'center', 'end', default 'start', only for popper), alignOffset (number, default 0, offset from alignment options, only for popper), avoidCollisions (boolean, default true, overrides side and align to prevent collisions, only for popper), collisionBoundary (Element/null/Array, default [], collision boundary element, only for popper), collisionPadding (number or Partial<Record<Side, number>>, default 10, distance from boundary edges, only for popper), arrowPadding (number, default 0, padding between arrow and content edges, only for popper), sticky (enum: 'partial' or 'always', default 'partial', sticky behavior on align axis, only for popper), hideWhenDetached (boolean, default false, whether to hide content when trigger is fully occluded, only for popper).

Select.Content data attributes

Select.Content supports data attributes: [data-state] with values 'open' or 'closed', [data-side] with values 'left', 'right', 'bottom', 'top', [data-align] with values 'start', 'end', 'center'.

Select.Content CSS variables

Select.Content exposes CSS custom properties when position='popper': --radix-select-content-transform-origin (computed from content and arrow positions), --radix-select-content-available-width (remaining width between trigger and boundary edge), --radix-select-content-available-height (remaining height between trigger and boundary edge), --radix-select-trigger-width (width of trigger), --radix-select-trigger-height (height of trigger).

Select.Item props

Select.Item accepts: asChild (boolean, optional, default false), value (string, required, the value given as data when submitted), disabled (boolean, optional, prevents user interaction), textValue (string, optional, optional text used for typeahead purposes, defaults to .textContent of Select.ItemText).

Select.Item data attributes

Select.Item supports data attributes: [data-state] with values 'checked' or 'unchecked', [data-highlighted] present when highlighted, [data-disabled] present when disabled.

Select.ItemText purpose

Select.ItemText is the textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning.

Select.Arrow props

Select.Arrow accepts: asChild (boolean, optional, default false), width (number, default 10, width of arrow in pixels), height (number, default 5, height of arrow in pixels). Only available when position is set to popper. Must be rendered inside Select.Content.

Select data-state values changed from active|inactive to checked|unchecked

Select's data-state values were renamed from 'active' and 'inactive' to 'checked' and 'unchecked'.

Select matching trigger size

Position Select content correctly when matching trigger size.

Select.Root disabled prop

Select.Root has a disabled prop.

Select.Root required prop

Select.Root has a required prop.

Select unstable composition parts

Select now exposes unstable composition parts: unstable_Provider and unstable_BubbleInput. These allow direct access and recomposition of the visually hidden inputs rendered for form submission.

Select presence-based exit animations

Added support for presence-based exit animations in Select.

Select bubble input empty string submission

Fixed the Select bubble hidden input so that it submits an empty string when no value is selected.

Select touch-scrolling in shadow DOM

Fixed Select closing unexpectedly after touch-scrolling its content when rendered inside an open shadow DOM.

Select.Value asChild and placeholder prop errors

Fixed Select.Value logging invalid prop errors when used with both asChild and a placeholder.

Select form prop forwarding to bubble input

Forward the form prop to the bubble input element to fix non-parent form submissions in Select.

Select items initially undefined error

Fixed error thrown when items are initially undefined in Select.

Select touch devices bugs

Fixed several bugs for touch devices in Select.

Select position bug long items off-screen

Fixed position bug in Select where popover may start off-screen for long items.

Select breaking change empty string value reset

Added ability to reset Select to placeholder using empty string "" value. This is a breaking change if you were using an option with a value of "".

Select nonce prop CSP

Add nonce prop to Select to be able to pass CSP nonce to the inline styles.

Select position prop for popper positioning

Add position prop to Select.Content to enable popper positioning.

Select.Content Portal part added

Select now has a Portal part. To avoid regressions, this part should be used if portalling behavior is desired. Note that z-index is no longer managed, providing full control of layering.

Select touch screen scroll buttons support

Improve scroll buttons touch screen support in Select.

Select.Value placeholder prop

Select.Value has a placeholder prop for displaying placeholder text.

Select.Content data-highlighted attribute

Select.Content supports a data-highlighted attribute for styling highlighted items.

Select Root component structure and props

Select.Root is the container for all parts of a select component. It accepts a defaultValue prop for uncontrolled usage (e.g., defaultValue="apple") and a value prop combined with onValueChange for controlled usage. It inherits props from the Select primitive Root part and supports size prop with values 1, 2, and 3.

Select.Trigger component and inherited parts

Select.Trigger is the button that toggles the select open and closed. It inherits props from both the Select primitive Trigger and Value parts. It supports the variant prop (values include surface, classic, soft, ghost), color prop (values include indigo, cyan, orange, crimson, gray), radius prop (values include none, large, full), placeholder prop for displaying a placeholder when no value is selected, and common margin props. Ghost variant renders without a visually containing element and uses negative margins to optically align with siblings while maintaining padded active and hover states.

Select.Content component and positioning

Select.Content is the component that pops out when the select is open. It inherits props from both the Select.Portal and Select.Content primitive parts. It supports the variant prop, color prop, highContrast prop for increasing item contrast, radius prop, and position prop which can be set to "popper" to position the menu below the trigger.

Select.Item component

Select.Item is the component that contains select items. It inherits props from the Select.Item primitive part. Items can be marked as disabled with the disabled prop.

Select.Group component for grouping items

Select.Group is used to group multiple items together. It inherits props from the Select.Group primitive part and should be used in conjunction with Select.Label to ensure good accessibility via automatic labelling.

Select.Label component

Select.Label is used to render the label of a group. It is not focusable using arrow keys. It inherits props from the Select.Label primitive part.

Select.Separator component

Select.Separator is used to visually separate items in the Select. It inherits props from the Select.Separator primitive part.

Select size prop values

The size prop on Select.Root accepts values 1, 2, and 3 to control the size of the select component.

Select Trigger variant options

Select.Trigger supports variant prop with values: surface, classic, soft, and ghost.

Select color prop values

Select.Trigger and Select.Content support color prop with values: indigo, cyan, orange, crimson, and gray.

Select radius prop values

Select.Trigger and Select.Content support radius prop with values: none, large, and full.

Select Trigger placeholder prop

The placeholder prop on Select.Trigger creates a select that doesn't require an initial value. When no value is selected, the placeholder text is displayed.

Select controlled vs uncontrolled API

Select supports both uncontrolled usage with defaultValue prop and controlled usage with value and onValueChange props. For example, uncontrolled: <Select.Root defaultValue="apple">. For controlled: <Select.Root value={value} onValueChange={setValue}>.

Select custom Trigger content for SSR and icons

You can customize how Trigger renders the selected value by controlling its children manually. This is useful for avoiding layout shifts during server-side rendering hydration or for adding custom content like icons. Example: <Select.Trigger><Flex as="span" align="center" gap="2">{icon}{label}</Flex></Select.Trigger>.

Select with SSR layout shift prevention

When using server-side rendering, Trigger executes client-side code to display the selected item's text, which can cause layout shifts. To avoid this, manually render the selected value by mapping values, such as storing data in an object and rendering the mapped value based on state.

Ghost trigger variant negative margin behavior

The ghost variant on Select.Trigger renders without a visually containing element. It uses negative margins to optically align itself against siblings while maintaining padded active and hover states, so it behaves differently in layout compared to other variants.

Select highContrast prop on Content

The highContrast prop on Select.Content increases the contrast of items in the select menu.

Select position popper example

Setting position="popper" on Select.Content positions the select menu below the trigger using popper positioning behavior.

Basic Select with Groups example

Example showing a Select with grouped items: <Select.Root defaultValue="apple"><Select.Trigger /><Select.Content><Select.Group><Select.Label>Fruits</Select.Label><Select.Item value="orange">Orange</Select.Item><Select.Item value="apple">Apple</Select.Item><Select.Item value="grape" disabled>Grape</Select.Item></Select.Group><Select.Separator /><Select.Group><Select.Label>Vegetables</Select.Label><Select.Item value="carrot">Carrot</Select.Item><Select.Item value="potato">Potato</Select.Item></Select.Group></Select.Content></Select.Root>

Give your agent this brain