Field

Reference

• Field

  The root container that manages the field's behavior and appearance. Coordinates the interaction between input, label and additional components while ensuring proper form submission and accessibility support.

  • Attributes

    • default-value

      string

      /

      default: -

      The initial value of the field when rendered. Use when you do not need to control its value.

    • required

      boolean

      /

      default: false

      When true, indicates that the field must have a value before the form can be submitted.

    • value

      string

      /

      default: -

      The controlled value of the field. Must be used in conjunction with onInput.

  • Events

    • onChange

      Event handler called when the field's value changes after losing focus.

    • onInput

      Event handler called when the field's value changes during user input.

• Text

  A text input field component that accepts and displays single-line text input. Provides standard text entry functionality with consistent styling and behavior.

  • Attributes

    • placeholder

      string

      /

      default: -

      The placeholder text displayed when the field is empty.

• Email

  An email input field component that accepts and validates email addresses. Provides specialized keyboard layout on mobile devices and basic email format validation.

  • Attributes

    • placeholder

      string

      /

      default: -

      The placeholder text displayed when the email field is empty.

• Number

  A numeric input field component that accepts and validates numerical values. Provides specialized keyboard layout on mobile devices and basic number format validation.

  • Attributes

    • input-mode

      enum

      /

      default: numeric

      Specifies the type of virtual keyboard to display on mobile devices. Use numeric for integers, decimal for floating-point numbers, tel for telephone numbers or none to prevent the virtual keyboard.

    • placeholder

      string

      /

      default: -

      The placeholder text displayed when the number field is empty.

• Password

  A password input field component that masks user input for security. Includes an optional visibility toggle and provides secure text entry functionality.

  • Attributes

    • placeholder

      string

      /

      default: -

      The placeholder text displayed when the password field is empty.

• Label

  The container for the field's label text. Provides proper association between the label and input for accessibility.

• Info

  The container for additional information or help text associated with the field.

  • Attributes

    • focus-only

      boolean

      /

      default: false

      When true, the info text is only displayed when the field is focused.

• Icon

  The container for an optional icon that provides visual context or indicates the field's purpose.

• Password Toggle

  A button that toggles the visibility of password field content between masked and visible states. It has to be placed within the so-field-password component.