> 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.3.3/api-reference/uicomponents/uiinputtext.md).

# UIInputText

Create a text input base on style guide

## 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` | Wether the input is disabled or not                      |
| 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
            }
        })
    )
}
```