# UIInputText

Create a text input base on style guide

**Since**: 7.0.0 (6.3.0)

| Name           | Type       | Default             | Description                                                       |
| -------------- | ---------- | ------------------- | ----------------------------------------------------------------- |
| id             | `string`   |                     | **Required** - Id of the input                                    |
| value          | `string`   |                     | **Required** - Value for input                                    |
| label          | `string`   |                     | The text label                                                    |
| secondaryLabel | `string`   |                     | The secondary text label displayed in top right corner            |
| placeholder    | `string`   |                     | Placeholder                                                       |
| size           | `string`   |                     | Size of the input                                                 |
| variant        | `string`   |                     | Variant for the input                                             |
| icon           | `string`   |                     | To get input with leadin icon                                     |
| disabled       | `boolean`  | `false`             | Whether the input is disabled or not                              |
| autocomplete   | `string`   | `""off""` | Sets autocomplete attribute on input field, defaults to "off"     |
| instructions   | `string`   |                     | Instruction/help text presented under input                       |
| error          | `string`   |                     | Error message to be presented. Trigger error presentation overall |
| onChange       | `function` |                     | **Required** - Callback for when the input value changes          |

### Example

```js
import {UIInputText} from 'writer'

render($$) {
    const el = $$('div')
    return el.append(
        $$(UIInputText, {
            id: 'myInput',
            label: this.getLabel('input label'),
            secondaryLabel: this.getLabel('Mandatory Field'),
            placehodlder: 'My placeholder',
            size: 'large',
            value: '',
            onChange: (value) => {
                // Do something
            }
        })
    )
}
```