---
title: Select
type: forms
description: '`Select` is a form component lets users choose options from an options menu.'
slug: /components/select/
keywords: ['select', 'dropdown', 'form control', 'options']
---

# Select

`Select` is a form component lets users choose options from an options menu.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/forms/select.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

```jsx live
import { Select } from '@wp-g2/components';

function Example() {
	return (
		<Select>
			<option>Ana</option>
			<option>Elsa</option>
			<option>Kristoff</option>
			<option>Olaf</option>
		</Select>
	);
}
```

## Props

##### align

**Type**: `CSS['alignItems']`

Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.

In the example below, `flex-start` will align the children content to the top.

##### defaultValue

**Type**: `boolean`

The default (initial) state to use if `value` is undefined.

##### direction

**Type**: `FlexDirection`

The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.

##### disabled

**Type**: `boolean`

Determines if element is disabled.

##### expanded

**Type**: `boolean`

Expands to the maximum available width (if horizontal) or height (if vertical).

##### isInline

**Type**: `boolean`

Renders as an inline element (layout).

##### isSubtle

**Type**: `boolean`

Renders a subtle variant.

##### justify

**Type**: `CSS['justifyContent']`

Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
In the example below, `flex-start` will align the children content to the left.

##### label

**Type**: `string`

Label for the form element.

##### multiple

**Type**: `boolean`

Enables selection of multiple values.

##### options

**Type**: `(SelectOption`,`SelectOptionGroup)[]`

Options to render within `Select`.

```jsx live
import { Select } from '@wp-g2/components';

function Example() {
	const options = [
		{
			label: 'Frozen',
			options: [
				{
					label: 'Into The Unknown',
					value: 'into-the-unknown',
				},
			],
		},
		{
			label: 'Frozen 2',
			options: [
				{
					label: 'Into The Unknown',
					value: 'into-the-unknown',
				},
			],
		},
	];

	return <Select options={options} />;
}
```

##### placeholder

**Type**: `string`

Example text to display as placeholder.

##### prefix

**Type**: `React.ReactElement`

Renders prefix content within `Select`.

```jsx live
import { Select, Text } from '@wp-g2/components';

function Example() {
	return <Select prefix={<Text>Before</Text>} />;
}
```

##### size

**Type**: `"large"`,`"medium"`,`"small"`

Determines the size of `Select`.

```jsx live
import { Select, Text } from '@wp-g2/components';

function Example() {
	return (
		<Select size="small">
			<option>Ana</option>
		</Select>
	);
}
```

##### suffix

**Type**: `React.ReactElement`

Renders prefix content within `Select`.

```jsx live
import { Select, Text } from '@wp-g2/components';

function Example() {
	return <Select suffix={<Text>After</Text>} />;
}
```

##### value

**Type**: `any`

Value for the form element.

##### wrap

**Type**: `boolean`

Determines if children should wrap.

<!-- /Automatically Generated -->
<!-- /props -->

## See Also

-   [Button](../button/)
-   [TextInput](../textinput/)