# 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.

Example: https://hextaui.com/docs/select/examples/groups
Component docs: https://hextaui.com/docs/select.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/select-groups.json
```

This adds `components/examples/select/groups.tsx` with the Select component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/select/groups.tsx"
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>
  )
}
```

## Props in this example

### Select

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

### SelectItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |

## More Select examples

- [Sizes](https://hextaui.com/docs/select/examples/sizes.md)
- [With icons](https://hextaui.com/docs/select/examples/icons.md)
- [Multiple](https://hextaui.com/docs/select/examples/multiple.md)
- [In a form](https://hextaui.com/docs/select/examples/field.md)
- [Disabled and invalid](https://hextaui.com/docs/select/examples/states.md)
- [Below the trigger](https://hextaui.com/docs/select/examples/dropdown.md)
- [Right to left](https://hextaui.com/docs/select/examples/rtl.md)