# Select (native)

Select (native) is a neobrutalist React component from Cruise UI. A native <select> styled like the inputs, with an ink chevron.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/select
```

Import: `import { CruiseSelect } from "@/components/cruise/select";`

## When to use

Picking one option from under ~8 in a form. The default choice for forms: phones open their own picker.

## When not to

Long lists people search (use a Combobox). Actions (use a Dropdown menu).

## Example (React)

```tsx
import { CruiseSelect } from "@/components/cruise/select";

export default function SelectExample() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <CruiseSelect label="Delivery time" defaultValue="morning" hint="We'll text you when the rider leaves.">
        <option value="morning">Morning (8am – 12 noon)</option>
        <option value="afternoon">Afternoon (12 noon – 4pm)</option>
        <option value="evening">Evening (4pm – 8pm)</option>
      </CruiseSelect>
      <CruiseSelect label="State" defaultValue="" error="Choose your state.">
        <option value="" disabled>
          Choose a state
        </option>
        <option value="lagos">Lagos</option>
        <option value="oyo">Oyo</option>
      </CruiseSelect>
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<div class="field">
  <label class="field-label" for="state">State</label>
  <span class="select-wrap">
    <select class="select" id="state" name="state" aria-invalid="true" aria-describedby="state-error">
      <option value="" disabled selected>Choose a state</option>
      <option value="lagos">Lagos</option>
      <option value="oyo">Oyo</option>
    </select>
  </span>
  <p class="field-error" id="state-error">Choose your state.</p>
</div>
```

## Props: CruiseSelect

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label?` | `string` | — | Visible label. Leave out inside a CruiseFormField (it brings the label). |
| `hint?` | `string` | — | Helper text under the field. |
| `error?` | `string` | — | Error message; turns the border and helper text --danger. |

Also takes every native `<select>` attribute.

## Accessibility

- Native select: every keyboard and screen reader already knows it.
- Always a visible <label>; errors use aria-invalid and aria-describedby.