Text input - Web Component โ
Browser support โ
Parameters โ
The Web component uses the <z-text-input>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
config | string | The main parameter has two components following the pattern:
|
label | string | Label of the input |
readonly (optional) | boolean | Transforms the input into an output |
value (optional) | string | Value of the model |
disabled (optional) | boolean | Blocks the interaction with the input component. |
required (optional) | boolean | Marks the input component as required. |
name (optional) | string | Identification for the field inside the form |
invalid (optional) | boolean | The forced state for set the input as invalid |
help-text (optional) | string | The forced message to be shown under the input |
input-type | string | The type of input. Possible values are:
|
data-list | string | Presents a list of suggestions for the input. Values to be separated by comma. |
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onchange | string | Returns the new value of the "value" attribute |
config
โ
The config
parameter is used to set the shape of the input between lined
and shaped
. Being omitted will render the default line
shape.
label
โ
The label
parameter is used to set the text label of the component. Make sure you always use it.
readonly
โ
The readonly
parameter is used to set the input in a read-only state. It's commonly used to display information.
value
โ
The value
parameter is used to set the text for the input.
disabled
โ
The disabled
parameter is used to block the interaction with the component. Not to be confused with readonly
.
required
โ
The required
parameter is used to set the component as required.
name
โ
The name
parameter is used to set the name of the component. This is useful when the component is part of a form.
invalid
โ
The invalid
parameter is used to set the component as invalid.
help-text
โ
The help-text
parameter is used to provide additional assistance to the user.
input-type
โ
The input-type
parameter is used to set the type of input. Possible values are: text
, tel
, email
and url
.
icon
โ
The icon
parameter is used to set an icon to the input. The icon will be displayed on the right side of the input.
max-length
โ
The max-length
parameter is used to set the maximum number of characters that the user can input. A counter will be displayed below the input.
data-list
โ
The data-list
parameter is used to set a list of suggestions for the input. The list must be an array of strings.
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.3/@zurich/web-components/text-input.js"></script>
Code
html
<!-- Default -->
<z-text-input label="Text input"></z-text-input>
<z-text-input label="Text input" config="shaped"></z-text-input>
<!-- With value -->
<z-text-input label="Text input" value="Some text"></z-text-input>
<z-text-input label="Text input" value="Some text" config="shaped"></z-text-input>
<!-- Disabled -->
<z-text-input label="Text input" disabled></z-text-input>
<z-text-input label="Text input" disabled config="shaped"></z-text-input>
<!-- Readonly -->
<z-text-input label="Text input" readonly value="Some text"></z-text-input>
<z-text-input label="Text input" readonly value="Some text" config="shaped"></z-text-input>
<!-- With help text -->
<z-text-input label="Text input" help-text="Help text"></z-text-input>
<z-text-input label="Text input" help-text="Help text" config="shaped"></z-text-input>
<!-- With maxlength -->
<z-text-input label="Text input" max-length="20"></z-text-input>
<z-text-input label="Text input" max-length="20" config="shaped"></z-text-input>
<!-- Invalid -->
<z-text-input label="Text input" help-text="Invalid input" invalid></z-text-input>
<z-text-input label="Text input" help-text="Invalid input" invalid config="shaped"></z-text-input>