OptionalcheckedWhether field is in error state.
Error hint text
Shown if error, replaces hintText.
Hint text shown below text field.
if error, then errorText is shown instead.
OptionaliconLeading icon name.
Whether an option is selected.
Label shown above the field.
Whether the dialog is open.
Height of options dropdown Default is 200px
The type used in FormField mixin
Static InternalshadowStaticstylesInvoked 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().
Invoked when the component is removed from the document's DOM.
This callback is the main signal to the element that it may no longer be
used. disconnectedCallback() should ensure that nothing is holding a
reference to the element (such as event listeners added to nodes external
to the element), so that it is free to be garbage collected.
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('keydown', this._handleKeydown);
}
An element may be re-connected after being disconnected.
ProtectedrenderInvoked on each update to perform rendering tasks. This method may return
any value renderable by lit-html's ChildPart - typically a
TemplateResult. Setting properties inside this method will not trigger
the element to update.
ProtectedfirstInvoked when the element is first updated. Implement to perform one time work on the element after update.
firstUpdated() {
this.renderRoot.getElementById('my-text-area').focus();
}
Setting properties inside this method will trigger the element to update again after this update cycle completes.
Map of changed properties with old values
ZetaSelectInput web component. Text input with dropdown select. Currently no typing or multi-select support.
change - Fired when the value of the select input changes. focus - Fired when the select input receives focus. blur - Fired when the select input loses focus.
Figma
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=229-39&m=dev
Storybook
https://design.zebra.com/web/storybook/index.html?path=/docs/components-select-input--docs