Text input
...
Browser support
...
Parameters
The CSS component uses the <label>
tag.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
z-text-input | string | The main parameter has two components following the pattern:
|
label | string | Label of the input |
readonly | boolean? | Transforms the input into an output |
value | string? | Value of the model |
disabled | boolean? | Blocks the interaction with the input component. |
required | boolean? | Marks the input component as required. |
name | string? | Identification for the field inside the form |
help-text | string? | The forced message to be shown under the input |
input-type | string | |
pattern | string? |
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onchange | string | Returns the new value of the "value" attribute |
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.
Invalid input
If you require to make the input invalid, use the native API of the input using setCustomValidity
. If no message is provided, the input is set to valid
.
ts
// Make invalid
input.setCustomValidity('Error message');
input.checkValidity();
Or you can use the data-invalid
attribute if you are using the scripts:
html
<label z-text-input>
<span>Text input</span>
<input type="text" data-invalid />
</label>
Playground
Customization
HTML Examples
Imports
html
<script type="module" src="/0.3.6/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@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>