Text input - CSS Component ​

The TextInput component can be used imported from:

Playground ​

Construction ​

Common API

For the basics, check the common specifications.

The CSS component uses the <label> tag.

z-text-input ​

The z-text-input is the main parameter used to render the text input component.

TIP

Setting a datalist tag inside the label tag with different options you can present a list of suggestions for the input. Also check the id of the datalist is the same as the attribute list inside the input tag. Check an example using the Playground.

TIP

Setting a maxlength attribute to the input will limit the number of characters that can be entered into the input.

Also you can display a counter of the remaining characters, using the output tag.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​