# Select

Display a dropdown list of items.

---

## Sizes

```tsx
import { Select } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex relative min-w-px max-w-full flex-col sm:flex-row sm:flex-wrap flex-1">
      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        {/* eslint-disable-next-line rulesdir/prefer-radio-for-few-static-options */}
        <Select aria-label="XSmall" placeholder="XSmall" size="xsmall">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </Select>
      </div>
      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        {/* eslint-disable-next-line rulesdir/prefer-radio-for-few-static-options */}
        <Select aria-label="Small" placeholder="Small" size="small">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </Select>
      </div>

      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        {/* eslint-disable-next-line rulesdir/prefer-radio-for-few-static-options */}
        <Select aria-label="Default" placeholder="Default">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </Select>
      </div>

      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        {/* eslint-disable-next-line rulesdir/prefer-radio-for-few-static-options */}
        <Select aria-label="Large" placeholder="Large" size="large">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </Select>
      </div>
    </div>
  );
}
```

## Prefix and suffix

```tsx
import { Select } from '@vercel/geistcn/components';
import { ArrowCircleUp } from '@vercel/geistcn/icons';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex relative min-w-px max-w-full flex-col sm:flex-row sm:flex-wrap flex-1">
      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        <Select
          aria-label="Small"
          placeholder="Small"
          prefix={<ArrowCircleUp />}
          size="small"
          suffix={<ArrowCircleUp />}
        />
      </div>

      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        <Select
          aria-label="Default"
          placeholder="Default"
          prefix={<ArrowCircleUp />}
          suffix={<ArrowCircleUp />}
        />
      </div>

      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        <Select
          aria-label="Large"
          placeholder="Large"
          prefix={<ArrowCircleUp />}
          size="large"
          suffix={<ArrowCircleUp />}
        />
      </div>
    </div>
  );
}
```

## Disabled

```tsx
import { Select } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Select
      aria-label="Disabled"
      disabled
      placeholder="Disabled with placeholder"
    />
  );
}
```

## Error

```tsx
import { Select } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex relative min-w-px max-w-full flex-col sm:flex-row sm:flex-wrap flex-1">
      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        <Select
          aria-label="XSmall with error"
          error="Please select a value."
          placeholder="XSmall"
          size="xsmall"
        />
      </div>
      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        <Select
          aria-label="Small with error"
          error="Please select a value."
          placeholder="Small"
          size="small"
        />
      </div>

      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        <Select
          aria-label="Default with error"
          error="Please select a value."
          placeholder="Default"
        />
      </div>

      <div className="flex relative min-w-px max-w-full flex-col items-start flex-1">
        <Select
          aria-label="Large with error"
          error="Please select a value."
          placeholder="Large"
          size="large"
        />
      </div>
    </div>
  );
}
```

## Label

```tsx
import { Select } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return <Select label="My label" placeholder="With label" />;
}
```

## With options

```tsx
import { Select } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-col md:flex-row gap-4 items-start">
      <div>
        <Select aria-label="Fruit" placeholder="Select a fruit">
          <option value="apple">Apple</option>
          <option value="orange">Orange</option>
          <option value="banana">Banana</option>
          <option value="grape">Grape</option>
        </Select>
      </div>
      <div>
        <Select
          aria-label="Fruit with default value"
          defaultValue="banana"
          placeholder="With default value"
        >
          <option value="apple">Apple</option>
          <option value="orange">Orange</option>
          <option value="banana">Banana</option>
          <option value="grape">Grape</option>
        </Select>
      </div>
    </div>
  );
}
```

## Required

```tsx
import { Select } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    // eslint-disable-next-line rulesdir/prefer-radio-for-few-static-options
    <Select
      label="Required field"
      placeholder="Please select an option"
      required
    >
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </Select>
  );
}
```

## Best Practices

* Pick `<Select>` for short, fixed lists (under ~10 items) where typing adds nothing; switch to `Combobox` once filtering helps.
* Use `MultiSelect` when more than one value can be chosen at once; use `Switch` for a 2–3 option segmented choice.
* Group options past ~10 items with native `<optgroup>`; Geist `<Select>` has no `.Group` static.
* Options are Title Case when short and match canonical branding (`Next.js`, not `NextJS`); keep the same register across the list.
* Label is a short Title Case noun (`Framework`, `Region`); accept the prop directly on `<Select>`.
* Placeholder is action-oriented (`Select a framework`), never `Choose one…`, `Pick`, or the label restated.
* Validate on blur and pass a string to `error`; messages name the field and end in a period (`Select a framework.`).
* Don’t wrap a labelled `<Select>` in a `Tooltip`; put the hint on a sibling icon button so the label stays announced.