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.
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.
Playground
Customization
HTML Examples
Imports
html
<script type="module" src="/0.5.0/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/TextInput.css" />
Code
html
<!-- 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>