Input

Credit Card Format Iconography

The type credit-card input masking and iconography include Amex, Discover, Mastercard, Visa, and Dinersclub. Information about credit card number masks and shapes can be found in this Baymard credit card article.

Input Slots

In your use of q2-input you may experience the need to use a button instead of just a plain icon on the right or left side of the input field. For this reason, we've added two slots you may use to make this possible.

Left side: input-left

With this slot, you can add a button to the left-hand side of the q2-input field.

<q2-input label="My Input Field">
  <q2-btn slot="input-left">
    <q2-icon type="calculator">
    </q2-icon>
  </q2-btn>
</q2-input>

Right side: input-right

With this slot, you can add a button to the right-hand side of the q2-input field.

<q2-input label="My Input Field">
  <q2-btn slot="input-right">
    <q2-icon type="add">
    </q2-icon>
  </q2-btn>
</q2-input>

Label Slot

If you need to display a label with more complexity, you may use the label slot to do just that. It allows you to provide complex HTML markup while still resulting in semantic code. Here is an example of how you can use it:

<q2-input>
  <div slot="label">
    Full Name
    <q2-tooltip label="First and last name" position="e">
      <q2-icon inline type="question"></q2-icon>
    </q2-tooltip>
  </div>
</q2-input>

Using checkValidity and pattern

Tecton aims to accurately replicate native browser APIs wherever possible. The checkValidity API can be somewhat tricky, so it's important to outline its expected behavior.

When you interact with the <q2-input> component, it updates the validity property in the same way a regular <input /> field does. However, if you need to check the validity at runtime, it's best to use the checkValidity method.

When you call checkValidity(), it returns a boolean value indicating whether the element is valid. If the input is in an invalid state, it will also emit an "invalid" event that you can listen for. From there, you can check the validity property of the component to access the corresponding validity object it provides.

<q2-input
  label="State Abbreviation"
  pattern="[A-Za-z]{2}"
></q2-input>

<q2-btn
  intent="workflow-secondary"
>
  Check Validity
</q2-btn>

<script>
  const myInput = document.querySelector("q2-input");
  const checkBtn = document.querySelector("q2-btn");

  checkBtn.addEventListener("click", async () => {
    await myInput.checkValidity();
  });

  myInput.addEventListener("invalid", async (result) => {
    console.log("VALIDITY", myInput.validity);
  });
</script>

Format Modifiers

Format modifiers control field behavior for different types of input fields. Each input type accepts its own set.

Alpha

Input Type: alpha

Spaces are disallowed by default; one modifier re-enables them.

Example:

<q2-input type="alpha" format-modifier="spaced"></q2-input>

Currency

Input Type: currency

Accepts float values for any supported currency code. Append -integer to a code to restrict entry to whole numbers.

Example:

<q2-input type="currency" format-modifier="MX-integer"></q2-input>

Numeric and Percentage

Input Types: numeric, percentage

These types share the same modifiers: positive blocks negatives, delimited adds thousands separators, and Ndecimal allows N decimal places (e.g., 2decimal).

Example:

<q2-input type="numeric" format-modifier="4decimal-delimited"></q2-input>

Phone

Input Type: phone

Use the Alpha-2 country code to set the field's mask and dialing prefix.

Example:

<q2-input type="phone" format-modifier="SI"></q2-input>

Postal

Input Type: postal

Use the Alpha-2 country code, plus an optional variant suffix, to set the field's mask.

Example:

<q2-input type="postal" format-modifier="SI"></q2-input>

Input Type

The type attribute of an input element directly affects both its behavior and user expectations. For example, setting the input type to "credit-card" (or a custom implementation using "text" with formatting logic) allows the input to visually match standard credit card number formatting and may include an associated icon to reinforce the context.

Use the correct input type to ensure optimal usability, accessibility, and user trust. For example:

• type="email" triggers native validation and displays email-specific keyboards on mobile devices.
• type="number" brings up a numeric keypad but may not be appropriate for inputs like credit card numbers due to formatting constraints.

Choosing the appropriate input type enhances both semantic meaning and interaction affordance.

Placeholders

We discourage relying on placeholder text as a primary method for conveying information. Placeholders disappear on focus, making them an unreliable mechanism for users to reference during data entry—particularly for users with visual or cognitive impairments.

However, when used appropriately, placeholder text can provide brief and contextually helpful hints—such as an example of the expected input format (e.g., MM/YY for expiration dates). Placeholder text should supplement, not replace, form labels or help text. It must not be the only source of essential guidance.

Text Masking

Sensitive inputs, such as passwords, credit card numbers, or social security numbers, should be masked by default to protect user privacy. When text is hidden, always provide a visibility toggle to allow users to reveal and verify their input when needed. This helps prevent errors and improves usability without compromising security.

Input Slots and Icon Placement

When integrating input slots using q2-input components with q2-icon, follow consistent conventions to ensure clarity and usability:

• Decorative icons should be placed on the left side of the input field. These provide visual context but do not perform actions.
• Signifiers—icons that represent functional actions (e.g., clear input, reveal password)—should be placed on the right side of the field.

Signifiers communicate specific actions or states. They should be clearly recognizable and aligned with established mental models or help establish new ones. Icons must accurately reflect their associated behavior to prevent confusion.