# Input (/docs/products/dash-dots/reference/components/input)

Give it a `label`: a `placeholder` disappears once the person types.

**Children:** Nothing

## Example

![The Input component](/assets/images/dash-dots/components/input.webp)

```xml title="view.dml"
<Input label="Phone number" type="phone" prefix="+232" placeholder="76 123456" value="{{ phone }}" onChange="setPhone" />
```

```ts title="controller.ts"
export default definePage({
  initialState: { phone: '' },
  mutations: {
    setPhone: (_state, event: ValueEvent) => ({ phone: event.detail.value }),
  },
});
```

## Props

| Prop          | Type                                                     | What it is                                                                      |
| ------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------- |
| `value`       | `string`                                                 |                                                                                 |
| `placeholder` | `string`                                                 |                                                                                 |
| `label`       | `string`                                                 |                                                                                 |
| `hint`        | `string`                                                 | Help shown under the field, which `error` replaces.                             |
| `error`       | `string`                                                 | Shown under the field in red, in place of `hint`.                               |
| `prefix`      | `string`                                                 | Text inside the field before what the person types, such as +232.               |
| `suffix`      | `string`                                                 | Text inside the field after what the person types, such as kg.                  |
| `type`        | `text`, `number`, `email`, `phone`, `password`, `search` | `search` shows a search icon and a search key on the keyboard. Default: `text`. |
| `clearable`   | `boolean`                                                | Shows a button that empties the field once it has text.                         |
| `maxLength`   | `number`                                                 |                                                                                 |
| `disabled`    | `boolean`                                                | Dims it, and the person can't use it.                                           |

## Events

| Event      | Sends                   | Notes                                              |
| ---------- | ----------------------- | -------------------------------------------------- |
| `onChange` | `{ value }` in `detail` |                                                    |
| `onSubmit` | `{ value }` in `detail` | When the person presses the keyboard's submit key. |