@zebra-fed/zeta-web
    Preparing search index...

    Class ZetaStepperInput

    ZetaStepperInput web component. A stepper input, also called numeric stepper, is a common UI element that allows users to input a number or value simply by clicking the plus and minus buttons.

    https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=21529-9963

    https://zeta-ds.web.app/web/storybook/?path=/docs/stepper-input--docs

    Hierarchy

    • FormFieldInterface<this> & LitElement<this> & ContourableInterface<this>
      • ZetaStepperInput
    Index

    Other

    constructor checked? disabled error errorText? hiddenInput hintText? id indeterminate input inputEl internals max min name placeholder required rounded size type value styles handleBlur handleChange handleFocus handleInput

    rendering

    render

    updates

    firstUpdated

    Other

    • Returns ZetaStepperInput

    checked?: boolean
    disabled: boolean = false
    error: boolean = false

    Whether text field is in error state.

    errorText?: string

    Error hint text

    Shown if error, replaces hintText.

    hiddenInput: HTMLInputElement
    hintText?: string

    Hint text shown below text field.

    if error, then errorText is shown instead.

    id: string = "hidden-stepper-input"

    Returns the value of element's id content attribute. Can be set to change it.

    MDN Reference

    indeterminate: boolean
    input: HTMLInputElement
    inputEl: HTMLInputElement
    internals: ElementInternals
    max: number
    min: number
    name: string
    placeholder: string
    required: boolean
    rounded: boolean
    size: "medium" | "large" = "medium"
    type: InputType = "stepper"
    value: string
    styles: CSSResultGroup[] = ...

    • Parameters

      • event: FocusEvent

      Returns void

    • Parameters

      • event: FocusEvent

      Returns void

    • Parameters

      • event: Event

      Returns void

    rendering

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

    updates

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

      Returns void

    Settings

    Member Visibility

    On This Page

    Other
    rendering
    updates