# InputProps

**Kind:** Interface

Props for the `Input` component. Also accepts:
* `InputStyleProps`

## Properties

### `aria-describedby?`

Type: `undefined | string`

A space separated list of description element IDs.

### `aria-labelledby?`

Type: `undefined | string`

A space separated list of label element IDs.

### `autoComplete?`

Type: `undefined | string`

The `autoComplete` attribute.

### `autoFocus?`

Type: `undefined | false | true`

The `autoFocus` attribute.

### `className?`

Type: `undefined | string`

Additional class names to apply to the input, separated by spaces.

### `disabled?`

Type: `undefined | false | true`

The `disabled` attribute.

### `id?`

Type: `undefined | string`

The `id` attribute.

### `max?`

Type: `number | string`

The `max` attribute.

### `maxLength?`

Type: `undefined | number`

The `maxLength` attribute.

### `min?`

Type: `number | string`

The `min` attribute.

### `minLength?`

Type: `undefined | number`

The `minLength` attribute.

### `name?`

Type: `undefined | string`

The `name` attribute.

### `pattern?`

Type: `undefined | string`

The `pattern` attribute.

### `placeholder?`

Type: `undefined | string`

The placeholder for the input.

### `readOnly?`

Type: `undefined | false | true`

The `readOnly` attribute.

### `required?`

Type: `undefined | false | true`

The `required` attribute.

### `size?`

Type: `ControlSizeProp`

The size of the input. Defaults to `default`.

### `spellCheck?`

Type: `undefined | false | true`

The `spellcheck` attribute.

### `step?`

Type: `number | string`

The `step` attribute.

### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the input.

### `tabIndex?`

Type: `undefined | number`

The `tabindex` attribute.

### `type?`

Type: `undefined | "number" | "text" | "date" | "datetime-local" | "email" | "month" | "password" | "search" | "tel" | "time" | "url" | "week"`

The `type` for the input. Defaults to `text`.

### `value`

Type: `string`

The input's current value.

## Methods

### `onBlur(e)`

A function to be called when the input loses focus.

**Parameters:**
- `e` (`FocusEvent<HTMLInputElement>`)

**Returns:** `unknown`

### `onChange(e)`

A function to be called when the input changes.

**Parameters:**
- `e` (`ChangeEvent<HTMLInputElement>`)

**Returns:** `unknown`

### `onFocus(e)`

A function to be called when the input gains focus.

**Parameters:**
- `e` (`FocusEvent<HTMLInputElement>`)

**Returns:** `unknown`

---

## InputSyncedProps

**Kind:** Interface

Props for the `InputSynced` component. Also accepts:
* `InputStyleProps`

### Properties

#### `aria-describedby?`

Type: `undefined | string`

A space separated list of description element IDs.

#### `aria-labelledby?`

Type: `undefined | string`

A space separated list of label element IDs.

#### `autoComplete?`

Type: `undefined | string`

The `autoComplete` attribute.

#### `autoFocus?`

Type: `undefined | false | true`

The `autoFocus` attribute.

#### `className?`

Type: `undefined | string`

Additional class names to apply to the input, separated by spaces.

#### `disabled?`

Type: `undefined | false | true`

The `disabled` attribute.

#### `globalConfigKey`

Type: `GlobalConfigKey`

A string key or array key path in `GlobalConfig`. The input value will always reflect the value stored in `GlobalConfig` for this key. Changing the input value will update `GlobalConfig`.

#### `id?`

Type: `undefined | string`

The `id` attribute.

#### `max?`

Type: `number | string`

The `max` attribute.

#### `maxLength?`

Type: `undefined | number`

The `maxLength` attribute.

#### `min?`

Type: `number | string`

The `min` attribute.

#### `minLength?`

Type: `undefined | number`

The `minLength` attribute.

#### `name?`

Type: `undefined | string`

The `name` attribute.

#### `pattern?`

Type: `undefined | string`

The `pattern` attribute.

#### `placeholder?`

Type: `undefined | string`

The placeholder for the input.

#### `readOnly?`

Type: `undefined | false | true`

The `readOnly` attribute.

#### `required?`

Type: `undefined | false | true`

The `required` attribute.

#### `size?`

Type: `ControlSizeProp`

The size of the input. Defaults to `default`.

#### `spellCheck?`

Type: `undefined | false | true`

The `spellcheck` attribute.

#### `step?`

Type: `number | string`

The `step` attribute.

#### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the input.

#### `tabIndex?`

Type: `undefined | number`

The `tabindex` attribute.

#### `type?`

Type: `undefined | "number" | "text" | "date" | "datetime-local" | "email" | "month" | "password" | "search" | "tel" | "time" | "url" | "week"`

The `type` for the input. Defaults to `text`.

### Methods

#### `onBlur(e)`

A function to be called when the input loses focus.

**Parameters:**
- `e` (`FocusEvent<HTMLInputElement>`)

**Returns:** `unknown`

#### `onChange(e)`

A function to be called when the input changes.

**Parameters:**
- `e` (`ChangeEvent<HTMLInputElement>`)

**Returns:** `unknown`

#### `onFocus(e)`

A function to be called when the input gains focus.

**Parameters:**
- `e` (`FocusEvent<HTMLInputElement>`)

**Returns:** `unknown`

---

## Input

**Kind:** Component

An input component. A wrapper around `<input>` that fits in with Airtable's user interface.

[[ Story id="input--example" title="Input example" ]]

**Parameters:**
- `props` (`InputProps`)
- `ref` (`React.Ref<HTMLInputElement>`)

**Returns:** `Element`

---

## InputSynced

**Kind:** Component

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

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

**Parameters:**
- `props` (`InputSyncedProps`)
- `ref` (`React.Ref<HTMLInputElement>`)

**Returns:** `Element`