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.
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().
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://zeta-ds.web.app/web/storybook/?path=/docs/text-input--docs