# SelectProps

**Kind:** Interface

Props for the `Select` component. Also accepts:
* `SelectStyleProps`

## Properties

### `aria-describedby?`

Type: `undefined | string`

A space separated list of description element IDs.

### `aria-label?`

Type: `undefined | string`

The `aria-label` attribute. Use this if the select is not referenced by a label element.

### `aria-labelledby?`

Type: `undefined | string`

A space separated list of label element IDs.

### `autoFocus?`

Type: `undefined | false | true`

The `autoFocus` attribute.

### `className?`

Type: `undefined | string`

Additional class names to apply to the select.

### `disabled?`

Type: `undefined | false | true`

If set to `true`, the user cannot interact with the select.

### `id?`

Type: `undefined | string`

The `id` attribute.

### `name?`

Type: `undefined | string`

The `name` attribute.

### `onChange?`

Type: `undefined | object`

A function to be called when the selected option changes.

### `options`

Type: `Array<SelectOption>`

The list of select options.

### `size?`

Type: `ControlSizeProp`

The size of the select.

### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the select.

### `tabIndex?`

Type: `undefined | number`

The `tabindex` attribute.

### `value`

Type: `SelectOptionValue`

The value of the selected option.

---

## SelectSyncedProps

**Kind:** Interface

Props for the `SelectSynced` component. Also accepts:
* `SelectStyleProps`

### Properties

#### `aria-describedby?`

Type: `undefined | string`

A space separated list of description element IDs.

#### `aria-label?`

Type: `undefined | string`

The `aria-label` attribute. Use this if the select is not referenced by a label element.

#### `aria-labelledby?`

Type: `undefined | string`

A space separated list of label element IDs.

#### `autoFocus?`

Type: `undefined | false | true`

The `autoFocus` attribute.

#### `className?`

Type: `undefined | string`

Additional class names to apply to the select.

#### `disabled?`

Type: `undefined | false | true`

If set to `true`, the user cannot interact with the select.

#### `globalConfigKey`

Type: `GlobalConfigKey`

A string key or array key path in `GlobalConfig`. The selected option will always reflect the value stored in `GlobalConfig` for this key. Selecting a new option will update `GlobalConfig`.

#### `id?`

Type: `undefined | string`

The `id` attribute.

#### `name?`

Type: `undefined | string`

The `name` attribute.

#### `onChange?`

Type: `undefined | object`

A function to be called when the selected option changes.

#### `options`

Type: `Array<SelectOption>`

The list of select options.

#### `size?`

Type: `ControlSizeProp`

The size of the select.

#### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the select.

#### `tabIndex?`

Type: `undefined | number`

The `tabindex` attribute.

---

## Select

**Kind:** Component

Dropdown menu component. A wrapper around `<select>` that fits in with Airtable's user interface.

[[ Story id="select--example" title="Select example" ]]

**Parameters:**
- `props` (`SelectProps`)
- `ref` (`React.Ref<HTMLSelectElement>`)

**Returns:** `Element`

---

## SelectSynced

**Kind:** Component

A wrapper around the `Select` component that syncs with `GlobalConfig`.

[[ Story id="select--synced-example" title="Synced select example" ]]

**Parameters:**
- `props` (`SelectSyncedProps`)
- `ref` (`React.Ref<HTMLSelectElement>`)

**Returns:** `Element`