> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/writer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/writer/6.5.0/api-reference/uicomponents/uiinputtext.md).

# UIInputText

Create a text input base on style guide

**Since**: 6.4.0 (6.3.0)

## Properties

| Name         | Type       | Default     | Description                                                   |
| ------------ | ---------- | ----------- | ------------------------------------------------------------- |
| id           | `string`   |             | **Required** - Id of the input                                |
| value        | `string`   |             | **Required** - Value for input                                |
| label        | `string`   |             | The text label                                                |
| placeholder  | `string`   |             | Placeholder                                                   |
| size         | `string`   |             | Size of the input                                             |
| variant      | `string`   |             | Variant for the input                                         |
| disabled     | `boolean`  | `false`     | Whether the input is disabled or not                          |
| autocomplete | `string`   | `"\"off\""` | Sets autocomplete attribute on input field, defaults to "off" |
| onChange     | `function` |             | **Required** - Callback for when the input value changes      |

## Example

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

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