Select: Below the trigger

alignItemWithTrigger={false} opens the list under the trigger like a menu. Touch input does this automatically.

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export function SelectDropdown() {
  return (
    <Select defaultValue="newest">
      <SelectTrigger aria-label="Sort by" className="w-44">
        <SelectValue />
      </SelectTrigger>
      <SelectContent alignItemWithTrigger={false}>
        <SelectItem value="newest">Newest first</SelectItem>
        <SelectItem value="oldest">Oldest first</SelectItem>
        <SelectItem value="popular">Most popular</SelectItem>
      </SelectContent>
    </Select>
  )
}

Add this example

This adds the example as components/examples/select/dropdown.tsx, together with the Select component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/select-dropdown.json

To add only the component, follow the Select installation.

Props in this example

The Select props this example sets, from the API reference.

Select

Prop	Type	Default
`defaultValue`	`Value \| Value[] \| null`	`–`

SelectContent

Prop	Type	Default
`alignItemWithTrigger`Open over the trigger with the current option lined up.	`boolean`	`true`

SelectItem

Prop	Type	Default
`value`	`Value`	`–`

Every prop is in the Select API reference.

More Select examples

See them all, with keyboard support and accessibility notes, on the Select page.