Text input - CSS Component

...

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

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.

Text inputText input

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.

Text input

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.

Text input

0 / 10

Playground

Customization

HTML Examples

Imports

<script type="module" src="/0.4.4/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.4.4/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.4.4/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.4/@zurich/css-components/TextInput.css" />

Code

<!-- Default -->
<label z-text-input>
  <span>Text input</span>
  <input type="text" placeholder="" />
</label>
<label z-text-input="shaped">
  <span>Text input</span>
  <input type="text" placeholder="" />
</label>

<!-- With value -->
<label z-text-input>
  <span>Text input</span>
  <input type="text" placeholder="" value="Some text" />
</label>
<label z-text-input="shaped">
  <span>Text input</span>
  <input type="text" placeholder="" value="Some text" />
</label>

<!-- Disabled -->
<label z-text-input>
  <span>Text input</span>
  <input type="text" placeholder="" disabled />
</label>
<label z-text-input="shaped">
  <span>Text input</span>
  <input type="text" placeholder="" disabled />
</label>

<!-- Readonly -->
<label z-text-input>
  <span>Text input</span>
  <input type="text" placeholder="" readonly value="Some text" />
</label>
<label z-text-input="shaped">
  <span>Text input</span>
  <input type="text" placeholder="" readonly value="Some text" />
</label>

<!-- With help text -->
<label z-text-input>
  <span>Text input</span>
  <small>Help text</small>
  <input type="text" placeholder="" />
</label>
<label z-text-input="shaped">
  <span>Text input</span>
  <small>Help text</small>
  <input type="text" placeholder="" />
</label>

<!-- With maxlength -->
<label z-text-input>
  <span>Text input</span>
  <input type="text" placeholder="" maxlength="20" />
  <output>0 / 20</output>
</label>
<label z-text-input="shaped">
  <span>Text input</span>
  <input type="text" placeholder="" maxlength="20" />
  <output>0 / 20</output>
</label>

<!-- Invalid -->
<label z-text-input>
  <span>Text input</span>
  <small>Invalid input</small>
  <input type="text" placeholder="" data-invalid />
</label>
<label z-text-input="shaped">
  <span>Text input</span>
  <small>Invalid input</small>
  <input type="text" placeholder="" data-invalid />
</label>