Class ZetaTextInput

Text input component with icon, affix, label and hint text

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

Hierarchy

  • FormFieldInterface<this> & LitElement<this> & SizeInterface<this> & ContourableInterface<this> & InteractiveInterface<this>
    • ZetaTextInput

Other

constructor checked? disabled error errorText hintText indeterminate input internals label leadingIcon? name prefix required rounded size suffix trailingIcon? type value shadowRootOptions styles blur focus handleChange

rendering

render

Other

constructor

Optionalchecked

checked?: boolean

disabled

disabled: boolean

error

error: boolean = false

Whether text field is in error state.

errorText

errorText: string = ""

Error hint text

Shown if error, replaces hintText.

hintText

hintText: string = ""

Hint text shown below text field.

if error, then errorText is shown instead.

indeterminate

indeterminate: boolean

input

input: HTMLInputElement

internals

internals: ElementInternals

label

label: string = ""

Label shown above text field.

OptionalleadingIcon

leadingIcon?: ZetaIconName

Leading icon name.

name

name: string

prefix

prefix: string = ""

Prefix text.

required

required: boolean

rounded

rounded: boolean

size

size: "small" | "medium" | "large"

suffix

suffix: string = ""

Suffix text.

OptionaltrailingIcon

trailingIcon?: ZetaIconName

Trailing icon name.

type

type:
    | "text"
    | "textarea"
    | "password"
    | "time"
    | "date" = "text"

Type of field

value

value: string

StaticshadowRootOptions

shadowRootOptions: ShadowRootInit = ...

Staticstyles

styles: CSSResultGroup[] = ...

blur

focus

handleChange

rendering

Protectedrender

  • render(): TemplateResult<1>

  • Invoked 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.

    Returns TemplateResult<1>

Settings

Member Visibility

On This Page

Other
rendering