Select: Groups and long lists

Group options with SelectGroup and SelectLabel. Long lists fit the screen and show scroll arrows that scroll when you hover them.

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

const zones = [
  {
    label: "Americas",
    items: [
      "Los Angeles",
      "Denver",
      "Chicago",
      "New York",
      "Toronto",
      "Mexico City",
      "Bogotá",
      "São Paulo",
      "Buenos Aires",
    ],
  },
  {
    label: "Europe",
    items: ["London", "Lisbon", "Paris", "Berlin", "Stockholm", "Athens"],
  },
  {
    label: "Asia",
    items: ["Dubai", "Mumbai", "Singapore", "Shanghai", "Tokyo", "Seoul"],
  },
]

export function SelectGroups() {
  return (
    <Select defaultValue="Berlin">
      <SelectTrigger aria-label="Time zone" className="w-56">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {zones.map((zone, index) => (
          <SelectGroup key={zone.label}>
            {index > 0 ? <SelectSeparator /> : null}
            <SelectLabel>{zone.label}</SelectLabel>
            {zone.items.map((city) => (
              <SelectItem key={city} value={city}>
                {city}
              </SelectItem>
            ))}
          </SelectGroup>
        ))}
      </SelectContent>
    </Select>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/select-groups.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`	`–`

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.