# Select
**Category**: react
**URL**: https://heroui.com/en/docs/react/components/select
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/en/react/components/(pickers)/select.mdx
> A select displays a collapsible list of options and allows a user to select one of them
***
## Usage
```tsx
import { Select } from "@heroui/react";
```
```tsx
import {Label, ListBox, Select} from "@heroui/react";
export function Default() {
return (
);
}
```
## Anatomy
```tsx
import {Select, Label, Description, Header, ListBox, Separator} from "@heroui/react";
export default () => (
);
```
## Examples
### Variants
The Select component supports two visual variants:
- **`primary`** (default) - Standard styling with shadow, suitable for most use cases
- **`secondary`** - Lower emphasis variant without shadow, suitable for use in Surface components
```tsx
import {Label, ListBox, Select} from "@heroui/react";
export function Variants() {
return (
);
}
```
### Full Width
```tsx
import {Label, ListBox, Select} from "@heroui/react";
export function FullWidth() {
return (
);
}
```
### With Description
```tsx
import {Description, Label, ListBox, Select} from "@heroui/react";
export function WithDescription() {
return (
);
}
```
### Required
```tsx
"use client";
import {Button, FieldError, Form, Label, ListBox, Select} from "@heroui/react";
export function Required() {
const onSubmit = (e: React.FormEvent) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const data: Record = {};
// Convert FormData to plain object
formData.forEach((value, key) => {
data[key] = value.toString();
});
alert("Form submitted successfully!");
};
return (
);
}
```
### Disabled
```tsx
import {Label, ListBox, Select} from "@heroui/react";
export function Disabled() {
return (
);
}
```
### With Disabled Options
```tsx
import {Label, ListBox, Select} from "@heroui/react";
export function WithDisabledOptions() {
return (
);
}
```
### Multiple Select
```tsx
import {Label, ListBox, Select} from "@heroui/react";
export function MultipleSelect() {
return (
);
}
```
### With Sections
```tsx
import {Header, Label, ListBox, Select, Separator} from "@heroui/react";
export function WithSections() {
return (
);
}
```
### Controlled
```tsx
"use client";
import type {Key} from "@heroui/react";
import {Label, ListBox, Select} from "@heroui/react";
import {useState} from "react";
export function Controlled() {
const states = [
{
id: "california",
name: "California",
},
{
id: "texas",
name: "Texas",
},
{
id: "florida",
name: "Florida",
},
{
id: "new-york",
name: "New York",
},
{
id: "illinois",
name: "Illinois",
},
{
id: "pennsylvania",
name: "Pennsylvania",
},
];
const [state, setState] = useState("california");
const selectedState = states.find((s) => s.id === state);
return (
Selected: {selectedState?.name || "None"}
);
}
```
### Controlled Multiple
```tsx
"use client";
import type {Key} from "@heroui/react";
import {Label, ListBox, Select} from "@heroui/react";
import React from "react";
export function ControlledMultiple() {
const [selected, setSelected] = React.useState(["california", "texas"]);
return (