Textarea
...
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-textarea | 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 |
elastic | boolean? | Makes the textarea auto-grow on typing |
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onchange | string | Returns the new value of the "value" attribute |
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-textarea>
<span>Text area</span>
<textarea 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/Textarea.css" />
Code
html
<!-- Default -->
<label z-textarea>
<span>Textarea</span>
<textarea placeholder=""></textarea>
</label>
<label z-textarea="shaped">
<span>Textarea</span>
<textarea placeholder=""></textarea>
</label>
<!-- With value -->
<label z-textarea>
<span>Textarea</span>
<textarea placeholder="">Some text</textarea>
</label>
<label z-textarea="shaped">
<span>Textarea</span>
<textarea placeholder="">Some text</textarea>
</label>
<!-- Disabled -->
<label z-textarea>
<span>Textarea</span>
<textarea placeholder="" disabled></textarea>
</label>
<label z-textarea="shaped">
<span>Textarea</span>
<textarea placeholder="" disabled></textarea>
</label>
<!-- Readonly -->
<label z-textarea>
<span>Textarea</span>
<textarea placeholder="" readonly>Some text</textarea>
</label>
<label z-textarea="shaped">
<span>Textarea</span>
<textarea placeholder="" readonly>Some text</textarea>
</label>
<!-- With help text -->
<label z-textarea>
<span>Textarea</span>
<small>Help text</small>
<textarea placeholder=""></textarea>
</label>
<label z-textarea="shaped">
<span>Textarea</span>
<small>Help text</small>
<textarea placeholder=""></textarea>
</label>
<!-- With maxlength -->
<label z-textarea>
<span>Textarea</span>
<textarea placeholder="" maxlength="20"></textarea>
<output>0 / 20</output>
</label>
<label z-textarea="shaped">
<span>Textarea</span>
<textarea placeholder="" maxlength="20"></textarea>
<output>0 / 20</output>
</label>
<!-- Invalid -->
<label z-textarea>
<span>Textarea</span>
<small>Invalid input</small>
<textarea placeholder="" data-invalid></textarea>
</label>
<label z-textarea="shaped">
<span>Textarea</span>
<small>Invalid input</small>
<textarea placeholder="" data-invalid></textarea>
</label>