OptionalcheckedWhether text field is in error state.
OptionalerrorError hint text
Shown if error, replaces hintText.
OptionalhintHint text shown below text field.
if error, then errorText is shown instead.
Label shown above text field.
OptionalleadingLeading icon name.
Prefix text.
OptionalreadOptionalrowsThe number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
Prop only applies when type is set to textarea.
Displays a button to clear the text field when true.
This will always display in the right most position and will push any trailing icon or suffix to the left.
It will apply to all text field types and will push any type specific interactions to the left as well.
For type textarea, the clear button will be displayed in the top right corner of the text area.
The clear button will not be displayed if the text field is disabled or read-only.
OptionalsuffixSuffix text.
OptionaltrailingTrailing icon name.
Type of field
StaticshadowStaticstylesInvoked when the component is added to the document's DOM.
In connectedCallback() you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.
connectedCallback() {
super.connectedCallback();
addEventListener('keydown', this._handleKeydown);
}
Typically, anything done in connectedCallback() should be undone when the
element is disconnected, in disconnectedCallback().
A text input field for entering text.
Text input component with icon, affix, label and hint text.
To change the width of the input field, either wrap it in a div with a fixed width, or you can apply display: block to the input field, and then provide a width.
focus - Fired when the input field is focused blur - Fired when the input field is blurred change - Fired when the input value changes and is committed input - Fired when the input value changes
Figma
https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=23116-92946
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-text-input--docs