# FieldPickerProps

**Kind:** Interface

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

## Properties

### `allowedTypes?`

Type: `Array<FieldType>`

An array indicating which field types can be selected.

### `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.

### `field?`

Type: `Field | null`

The selected field model.

### `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 field changes.

### `placeholder?`

Type: `undefined | string`

The placeholder text when no field is selected.

### `shouldAllowPickingNone?`

Type: `undefined | false | true`

If set to `true`, the user can unset the selected field.

### `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.

### `table?`

Type: `Table | null`

The parent table model to select fields from. If `null` or `undefined`, the picker won't render.

---

## FieldPickerSyncedProps

**Kind:** Interface

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

### Properties

#### `allowedTypes?`

Type: `Array<FieldType>`

An array indicating which field types can be selected.

#### `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 field will always reflect the field id stored in `GlobalConfig` for this key. Selecting a new field 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 field changes.

#### `placeholder?`

Type: `undefined | string`

The placeholder text when no field is selected.

#### `shouldAllowPickingNone?`

Type: `undefined | false | true`

If set to `true`, the user can unset the selected field.

#### `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.

#### `table?`

Type: `Table | null`

The parent table model to select fields from. If `null` or `undefined`, the picker won't render.

---

## FieldPicker

**Kind:** Component

Dropdown menu component for selecting fields.

[[ Story id="modelpickers--fieldpicker-example" title="Field picker example" ]]

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

**Returns:** `null | Element`

---

## FieldPickerSynced

**Kind:** Component

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

[[ Story id="modelpickers--fieldpickersynced-example" title="Synced field picker example" ]]

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

**Returns:** `Element`