tuix-input

One element covers four field types. The label floats above the value once the field has content or focus, and the helper line below carries a state icon.

Loading the components…

Types

Loading the components…

The password field brings its own show/hide eye, with no property and no event.

Loading the components…

A textarea with maxlength also shows a character counter.

Value	Attribute	Renders
`InputType.TEXT`	`text`	A single-line field, with `iconRight` if set
`InputType.SEARCH`	`search`	A single-line field with a leading search icon
`InputType.PASSWORD`	`password`	A masked field with a built-in show/hide eye icon
`InputType.TEXT_AREA`	`textarea`	A multi-line field, with a counter when `maxlength` is set

Description states

descriptionType picks the icon and the colour of the helper line, and tints the field itself. With anything other than text the icon and a default label appear even when description is empty.

Loading the components…

Value	Attribute	Icon	Colour
`DescriptionType.TEXT`	`text`	none	Muted; shown only when `description` is set
`DescriptionType.WARNING`	`warning`	`triangle-exclamation`	`VALIDATION`
`DescriptionType.ERROR`	`error`	`circle-x`	`ERROR`
`DescriptionType.SUCCESS`	`success`	`circle-check`	`SUCCESS`
`DescriptionType.LOADING`	`loading`	`loader`	`PRIMARY_300`

States

Loading the components…

Events

Typing in the field shows what the handlers receive:

Loading the components…

input.addEventListener('on-change', (event) => setValue(event.detail.value))

The component does not own its value. on-change reports what was typed; the value only changes if the application writes it back to value.

API

Properties

Property	Attribute	Type	Default	Description
`value`	`value`	`string`	`''`	The field value
`title`	`title`	`string`	`''`	Floating label
`placeholder`	`placeholder`	`string`	`''`	Placeholder text
`type`	`type`	`InputType`	`text`	`text`, `search`, `password` or `textarea`
`iconRight`	`iconright`	`IconName`	None	Trailing icon, `text` only
`maxlength`	`maxlength`	`number`	None	Character limit. On a textarea it also shows a counter
`description`	`description`	`string`	None	Helper text under the field
`descriptionType`	`descriptiontype`	`DescriptionType`	`text`	Which state the helper line shows
`disabled`	`disabled`	`boolean`	`false`	Blocks input and events
`readonly`	`readonly`	`boolean`	`false`	Value shown but not editable
`autofocus`	`autofocus`	`boolean`	`false`	Focus the field once rendered, unless disabled or readonly
`dark`	`dark`	`boolean`	`false`	Dark palette

Events

Event	Detail	When
`on-change`	`{ value: string }`	On every keystroke (the native `input`)
`on-blur`	`{ value: string }`	The field loses focus
`on-click`	None	The field is clicked and not disabled

Notes

iconRight is drawn on a text field only. A password field puts its own show/hide eye in that position and ignores iconRight, though it still reserves the space for one; search and textarea ignore it outright.
title is also the global HTML attribute, so setting it in plain HTML gives the host a native browser tooltip as well. Frameworks that set it as a property, including the React wrapper, do not.
The floating label needs the field to have a placeholder; the component falls back to a single space so the label animates correctly.
The textarea counter reads value.length, so it stays right when the value is set from outside.
The host is inline: it needs a container with a width, as every example above gives it.

tuix-input

On this page