Select

A single-select field built on Base UI Select for value display, typeahead, keyboard navigation, and form submission.

Preview#

Controls

Anatomy#

import {
  Select,
  SelectContent,
  SelectIcon,
  SelectItem,
  SelectItemIndicator,
  SelectItemText,
  SelectList,
  SelectTrigger,
  SelectValue,
} from "raft-ui";

<Select defaultValue="option">
  <SelectTrigger>
    <SelectValue />
    <SelectIcon />
  </SelectTrigger>
  <SelectContent>
    <SelectList>
      <SelectItem value="option">
        <SelectItemText />
        <SelectItemIndicator />
      </SelectItem>
    </SelectList>
  </SelectContent>
</Select>

Usage#

Icons#

Groups#

States#

Scrolling#

With Field#

Submitted through the hidden input named sort.

Custom trigger#

API#WIP

Select#

...props
Base UI Select.Root.Props<Value, Multiple>
Owns value, hidden input, open state, keyboard navigation, typeahead, and form submission metadata.

SelectTrigger#

render
ReactElement | (props, state) => ReactElement
Replaces the trigger element entirely. When provided, the default Button and its recipe styles are skipped; pass event and aria props to your own element.
...props
Base UI Select.Trigger.Props
Default trigger renders an outline md Button. Compose SelectValue, icons, or custom inline content as children.

SelectValue#

...props
Base UI Select.Value.Props
Selected value display. Use placeholder for the empty state, or pass children to format the value.

SelectIcon#

...props
Base UI Select.Icon.Props
Chevron or custom indicator inside the trigger.

SelectContent#

...props
Base UI Select.Popup + Positioner props
Portaled options shell. Defaults to side=bottom, align=start, sideOffset=4, disableAnchorTracking=true, and positionMethod=fixed.

SelectPortal#

container
HTMLElement | RefObject | null
Custom portal container for framed previews or contained overlays.
...props
Base UI Select.Portal.Props
Portals the select list to the body or a custom container.

SelectPopup#

...props
ComponentPropsWithRef<"div">
Static panel shell for docs previews and non-portaled comparison panes.

SelectList#

...props
Base UI Select.List.Props
Scrollable list container inside the popup.

SelectItem#

...props
Base UI Select.Item.Props
Option row. Selection, highlight, and disabled states are exposed through Base UI data attributes.

SelectItemLeading#

...props
React.ComponentPropsWithRef<'span'>
Optional leading slot for icons, avatars, or a reserved source-parity column before SelectItemText.

SelectItemText#

...props
Base UI Select.ItemText.Props
Text span inside SelectItem.

SelectItemIndicator#

...props
Base UI Select.ItemIndicator.Props
Selected-state indicator. Renders a check icon by default.

SelectLabel#

...props
Base UI Select.Label.Props
Accessible label automatically associated with the select trigger when Field is not the outer owner.

SelectGroup#

...props
Base UI Select.Group.Props
Optional grouping container for long option lists.

SelectGroupLabel#

...props
Base UI Select.GroupLabel.Props
Label for a SelectGroup.

SelectSeparator#

...props
StyledProps<ComponentPropsWithRef<"div">>
Horizontal divider between option groups.

SelectScrollUpArrow#

...props
Base UI Select.ScrollUpArrow.Props
Scroll hint shown at the top when the list overflows.

SelectScrollDownArrow#

...props
Base UI Select.ScrollDownArrow.Props
Scroll hint shown at the bottom when the list overflows.

SelectArrow#

...props
Base UI Select.Arrow.Props
Optional arrow pointing at the trigger.