# Select
**Category**: react
**URL**: https://www.heroui.com/docs/react/components/select
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(pickers)/select.mdx
> A select displays a collapsible list of options and allows a user to select one of them
***
## Import
```tsx
import { Select } from "@heroui/react";
```
### Usage
```tsx
import {Label, ListBox, Select} from "@heroui/react";
export function Default() {
return (
);
}
```
### Anatomy
Import the Select component and access all parts using dot notation.
```tsx
import {Select, Label, Description, Header, ListBox, Separator} from "@heroui/react";
export default () => (
);
```
### With Description
```tsx
import {Description, Label, ListBox, Select} from "@heroui/react";
export function WithDescription() {
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 (
);
}
```
### With Disabled Options
```tsx
import {Label, ListBox, Select} from "@heroui/react";
export function WithDisabledOptions() {
return (
);
}
```
### Custom Indicator
```tsx
import {ChevronsExpandVertical} from "@gravity-ui/icons";
import {Label, ListBox, Select} from "@heroui/react";
export function CustomIndicator() {
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 (
);
}
```
### Full Width
```tsx
import {Label, ListBox, Select} from "@heroui/react";
export function FullWidth() {
return (
);
}
```
### 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 (