# Custom select
Custom select is a neobrutalist React component from Cruise UI. A select with our own list (check on the chosen option), for when native won't do.
Install (with the @cruiseui registry in components.json, see Installation):
```bash
npx shadcn@latest add @cruiseui/custom-select
```
Import: `import { CruiseCustomSelect } from "@/components/cruise/custom-select";`
## When to use
Outside forms, or when options need more than text.
## When not to
Forms (use the native Select). Long lists (use a Combobox).
## Example (React)
```tsx
import { CruiseCustomSelect } from "@/components/cruise/custom-select";
const areas = ["Ikeja", "Yaba", "Surulere", "Lekki", "Victoria Island", "Ajah"].map((label) => ({
value: label.toLowerCase().replace(/\s+/g, "-"),
label,
}));
export default function CustomSelectExample() {
return (
);
}
```
## HTML
Needs theme.css (https://cruiseui.dev/theme.css).
```html
Delivery area
```
## Props: CruiseCustomSelect
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | — |
| `options` | `CruiseSelectOption[]` | — | — |
| `value?` | `V \| null` | — | — |
| `defaultValue?` | `V \| null` | — | — |
| `onValueChange?` | `((value: V \| null) => void)` | — | — |
| `placeholder?` | `string` | `"Choose…"` | — |
| `hint?` | `string` | — | — |
| `error?` | `string` | — | — |
| `disabled?` | `boolean` | — | — |
| `popupClassName?` | `string` | — | Extra classes on the list, e.g. "nepa-mode" (it renders in ). |
| `className?` | `string` | — | — |
## Accessibility
- listbox / option roles with aria-selected; arrows, Home/End and typeahead.
- Always a visible label.