UIInputSearch

Create a search input base on style guide

Since: 7.0.0

NameTypeDefaultDescription

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

searching

boolean

false

If search is in progress, a spinner will be displayed

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

import {UIInputSearch} from 'writer'

render($$) {
    const el = $$('div')
    return el.append(
        $$(UIInputSearch, {
            id: 'mySearchInput',
            label: this.getLabel('Search'),
            placehodlder: 'My placeholder',
            size: 'large',
            value: '',
            searching: true/false,
            onChange: (value) => {
                // Do something
            }
        })
    )
}