Select

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

GitHub

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#

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

SelectTrigger#

PropTypeDefaultDescription
renderReactElement | (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.
...propsBase UI Select.Trigger.Props—Default trigger renders an outline md Button. Compose SelectValue, icons, or custom inline content as children.

SelectValue#

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

SelectIcon#

PropTypeDefaultDescription
...propsBase UI Select.Icon.Props—Chevron or custom indicator inside the trigger.

SelectContent#

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

SelectPortal#

PropTypeDefaultDescription
containerHTMLElement | RefObject | null—Custom portal container for framed previews or contained overlays.
...propsBase UI Select.Portal.Props—Portals the select list to the body or a custom container.

SelectPopup#

PropTypeDefaultDescription
...propsComponentPropsWithRef<"div">—Static panel shell for docs previews and non-portaled comparison panes.

SelectList#

PropTypeDefaultDescription
...propsBase UI Select.List.Props—Scrollable list container inside the popup.

SelectItem#

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

SelectItemLeading#

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

SelectItemText#

PropTypeDefaultDescription
...propsBase UI Select.ItemText.Props—Text span inside SelectItem.

SelectItemIndicator#

PropTypeDefaultDescription
...propsBase UI Select.ItemIndicator.Props—Selected-state indicator. Renders a check icon by default.

SelectLabel#

PropTypeDefaultDescription
...propsBase UI Select.Label.Props—Accessible label automatically associated with the select trigger when Field is not the outer owner.

SelectGroup#

PropTypeDefaultDescription
...propsBase UI Select.Group.Props—Optional grouping container for long option lists.

SelectGroupLabel#

PropTypeDefaultDescription
...propsBase UI Select.GroupLabel.Props—Label for a SelectGroup.

SelectSeparator#

PropTypeDefaultDescription
...propsStyledProps<ComponentPropsWithRef<"div">>—Horizontal divider between option groups.

SelectScrollUpArrow#

PropTypeDefaultDescription
...propsBase UI Select.ScrollUpArrow.Props—Scroll hint shown at the top when the list overflows.

SelectScrollDownArrow#

PropTypeDefaultDescription
...propsBase UI Select.ScrollDownArrow.Props—Scroll hint shown at the bottom when the list overflows.

SelectArrow#

PropTypeDefaultDescription
...propsBase UI Select.Arrow.Props—Optional arrow pointing at the trigger.