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

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
            }
        })
    )
}

Last updated