Forms

Overview

The form input system in this design system provides a structured, consistent way to handle user inputs across a variety of field types. Whether you need text inputs, number fields, email, or password fields, or more specialized fields like checkboxes, radio buttons, and select dropdowns, this system ensures that all inputs are styled uniformly and remain accessible. Each input type has its own specific markup requirements, and in some cases, fields use custom wrappers like form-field or checkbox-field to ensure proper layout.

1. Form Field Structure

For most input types (like text, number, email, and select fields), a consistent structure is used to ensure proper layout and styling. This structure includes the following key classes:

  • form-field: The main wrapper for each form field. It ensures that the label, input, and hint/validation messages are grouped correctly.
  • form-field__wrapper: This inner wrapper surrounds the input element and provides flexibility for layout adjustments, such as adding icons or validation states.
  • form-field__hint-message: This element is used to display contextual hint messages or validation feedback below the input field.

Here’s an example of the structure:

<div class="form-field">
  <label for="text-input">Text Input</label>
  <div class="form-field__wrapper">
    <input type="text" id="text-input" name="text-input" placeholder="Enter text here" />
  </div>
  <span class="form-field__hint-message">This is a hint message.</span>
</div>

For checkboxes and radio buttons, the structure is simpler and uses dedicated wrappers like checkbox-field and radio-field.

2. Input Field Types

Text Input

Text input fields are designed for short, single-line user inputs, such as names, titles, or short descriptions.

<div class="form-field">
  <label for="text-input">Text Input</label>
  <div class="form-field__wrapper">
    <input type="text" id="text-input" name="text-input" placeholder="Enter text here" />
  </div>
  <span class="form-field__hint-message">This is a hint message.</span>
</div>
  • Attributes: Supports required, disabled, and placeholder.
Hint text
This field should not be empty
Field is valid

Number Input

Number input fields allow users to input numeric values, such as age, quantity, or pricing information.

<div class="form-field">
  <label for="number-input">Number Input</label>
  <div class="form-field__wrapper">
    <input type="number" id="number-input" name="number-input" placeholder="Enter a number" />
  </div>
  <span class="form-field__hint-message"></span>
</div>
  • Attributes: Supports min, max, step, and required.

Phone Input (masked)

type="tel"
type="phone" 

<div class="form-field">
  <label for="tel-1">Tel Input</label>
  <div class="form-field__wrapper">
    <input type="tel" id="tel-1" name="" />
  </div>
  <span class="form-field__hint-message"></span>
</div>
  • Supports both input[type="tel"] and input[type="phone"] input types
  • Supports up between 1 and 3 numbers for country code

Date Input (masked)

type="text"
data-mask="date"
data-mask-format="monthYear"

mm/dd/yy example (default)

<div class="form-field">
  <label for="date-1">Number Input</label>
  <div class="form-field__wrapper">
    <input type="text" data-mask="date" id="date-1" name="" />
  </div>
  <span class="form-field__hint-message"></span>
</div>

mm/yy example

<div class="form-field">
  <label for="date-2">Number Input</label>
  <div class="form-field__wrapper">
    <input type="text" data-mask="date" data-mask-format="monthYear" id="date-2" name="" />
  </div>
  <span class="form-field__hint-message"></span>
</div>

Time Input (masked)

type="text"
data-mask="time"

<div class="form-field">
  <label for="time-1">Time Input</label>
  <div class="form-field__wrapper">
    <input type="text" data-mask="time" id="time-1" name="" />
  </div>
  <span class="form-field__hint-message"></span>
</div>

Card Input (masked)

type="text"
data-mask="card"

Mask for both 16-digit cards (Visa, MasterCard, etc.) and 15-digit cards (American Express). The mask detects the first two numbers and applies the correct mask automatically. For example, American Express usually starts with 34 or 37.

<div class="form-field">
  <label for="card-1">Time Input</label>
  <div class="form-field__wrapper">
    <input type="text" data-mask="card" id="card-1" name="" />
  </div>
  <span class="form-field__hint-message"></span>
</div>

Email Input

Email input fields ensure users enter a valid email address by automatically validating the format.

<div class="form-field">
  <label for="email-input">Email Input</label>
  <div class="form-field__wrapper">
    <input type="email" id="email-input" name="email-input" placeholder="Enter your email" />
  </div>
  <span class="form-field__hint-message"></span>
</div>
  • Attributes: Supports required, disabled, and placeholder.

Password Input

Password input fields allow users to enter sensitive information like passwords, masking characters for security.

<div class="form-field">
  <label for="password-input">Password Input</label>
  <div class="form-field__wrapper">
    <input type="password" id="password-input" name="password-input" placeholder="Enter your password" />
  </div>
  <span class="form-field__hint-message"></span>
</div>
  • Attributes: Can include minlength and maxlength.

Textarea

Textarea fields are used for larger, multi-line text entries, such as comments, feedback, or long descriptions.

<div class="form-field">
  <label for="textarea-input">Textarea</label>
  <div class="form-field__wrapper">
    <textarea id="textarea-input" name="textarea-input" placeholder="Enter detailed text"></textarea>
  </div>
  <span class="form-field__hint-message"></span>
</div>
  • Attributes: Supports rows, cols, and maxlength.

Select Field

Select fields allow users to choose from a dropdown menu of options. These fields use the form-field wrapper for consistent layout.

<div class="form-field">
  <label for="select-1">Select</label>
  <select id="select-1">
    <option disabled selected>Select an Option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
</div>
  • Attributes: Supports disabled, required, and multiple.
This is a hint text to help user.
Select at least one option.
Select at least one option.

Checkbox Field

Checkboxes allow users to select one or more options independently. They do not use the form-field wrapper.

<div class="checkbox-field">
  <input type="checkbox" id="cb1">
  <label for="cb1">Checkbox</label>
</div>
  • Attributes: Supports checked, disabled, and required.
Checkbox Field Grouping

Radio Field

Radio buttons allow users to select one option from a group. Only one radio button in a group can be selected at a time.

<div class="radio-field">
  <input type="radio" id="r1" name="group">
  <label for="r1">Radio</label>
</div>
  • Attributes: Supports checked, disabled, and required.
Radio Button Field Grouping

3. CSS Validation States

The form system uses CSS classes such as valid, invalid, and required to visually indicate validation states. These classes are applied either manually or through server-side logic, with no built-in JavaScript validation.

Valid State

<input type="text" class="valid" placeholder="Valid input" />

Invalid State

<input type="text" class="invalid" placeholder="Invalid input" />

Required and Disabled

<input type="text" required placeholder="Required input" />
<input type="text" disabled placeholder="Disabled input" />

Need Help?

If you’re stuck or need assistance, don’t hesitate to reach out to our support team for guidance.

get in touch