Input

Input fields allow users to enter text information. They come in various types and can be enhanced with labels, hints, and validation states.

When to use

• To collect user information in forms
• For search functionality
• To enter settings or preferences
• For authentication (username, password)
• To capture numeric values, dates, or other specific data types

Key features

• Multiple types - Text, email, password, number, date, and more
• Three sizes - Small, medium (default), and large
• Validation states - Error and success states with messages
• Icon support - Add icons to left or right of input
• Textarea - Multi-line text input with auto-resize option
• Select dropdown - Choose from predefined options
• Checkbox & Radio - For boolean and single-choice inputs
• Accessible - Full keyboard navigation and screen reader support

Anatomy

A complete input field consists of:

• Label - Describes the input purpose
• Input field - Where users enter data
• Helper text - Additional guidance or requirements
• Error/Success message - Validation feedback
• Icons - Visual indicators or actions

Tip: Use the accordion below to explore different input demos. Click "Open in new tab" to see the full demo page.

Installation

npm install @pm7/core

CSS Classes

Data Attributes

Input components do not use any special data attributes. They rely on standard HTML attributes and CSS classes for functionality.

Basic Usage

<!-- Basic input -->
<input type="text" class="pm7-input" placeholder="Enter text...">

<!-- Input with label -->
<div class="pm7-form-group">
  <label for="email" class="pm7-label">Email</label>
  <input type="email" id="email" class="pm7-input" placeholder="Enter your email">
</div>

<!-- Required field -->
<div class="pm7-form-group">
  <label for="name" class="pm7-label pm7-label--required">Full Name</label>
  <input type="text" id="name" class="pm7-input" required>
</div>

<!-- Input with helper text -->
<div class="pm7-form-group">
  <label for="password" class="pm7-label">Password</label>
  <input type="password" id="password" class="pm7-input">
  <p class="pm7-helper-text">Must be at least 8 characters</p>
</div>

Checkbox and Radio

<!-- Checkbox -->
<label class="pm7-checkbox">
  <input type="checkbox">
  <span class="pm7-checkbox-indicator"></span>
  <span class="pm7-checkbox-label">I agree to the terms</span>
</label>

<!-- Radio buttons -->
<div class="pm7-form-group">
  <p class="pm7-label">Choose a plan:</p>
  <label class="pm7-radio">
    <input type="radio" name="plan" value="basic" checked>
    <span class="pm7-radio-indicator"></span>
    <span class="pm7-radio-label">Basic Plan</span>
  </label>
  <label class="pm7-radio">
    <input type="radio" name="plan" value="pro">
    <span class="pm7-radio-indicator"></span>
    <span class="pm7-radio-label">Pro Plan</span>
  </label>
</div>

Switch/Toggle

<!-- Basic switch -->
<label class="pm7-switch">
  <input type="checkbox">
  <span class="pm7-switch-track">
    <span class="pm7-switch-thumb"></span>
  </span>
  <span class="pm7-switch-label">Enable notifications</span>
</label>

Input with Icons

<!-- Icon on left -->
<div class="pm7-input-icon-wrapper">
  <svg class="pm7-input-icon pm7-input-icon--left" width="16" height="16">
    <!-- Search icon -->
  </svg>
  <input type="search" class="pm7-input pm7-input--with-icon-left" placeholder="Search...">
</div>

<!-- Icon on right -->
<div class="pm7-input-icon-wrapper">
  <input type="password" class="pm7-input pm7-input--with-icon-right" placeholder="Password">
  <svg class="pm7-input-icon pm7-input-icon--right" width="16" height="16">
    <!-- Lock icon -->
  </svg>
</div>

Input Groups with Addons

<!-- Prefix addon -->
<div class="pm7-input-group">
  <span class="pm7-input-addon">https://</span>
  <input type="text" class="pm7-input" placeholder="yoursite.com">
</div>

<!-- Suffix addon -->
<div class="pm7-input-group">
  <input type="number" class="pm7-input" placeholder="0.00">
  <span class="pm7-input-addon">USD</span>
</div>

<!-- Button addon -->
<div class="pm7-input-group">
  <input type="text" class="pm7-input" placeholder="Enter coupon code">
  <button class="pm7-button pm7-button--primary">Apply</button>
</div>

Validation States

<!-- Error state -->
<div class="pm7-form-group">
  <label for="username" class="pm7-label">Username</label>
  <input type="text" id="username" class="pm7-input pm7-input--error">
  <p class="pm7-helper-text pm7-helper-text--error">Username already taken</p>
</div>

<!-- Success state -->
<div class="pm7-form-group">
  <label for="email-verify" class="pm7-label">Email</label>
  <input type="email" id="email-verify" class="pm7-input pm7-input--success" value="user@example.com">
  <p class="pm7-helper-text pm7-helper-text--success">Email verified!</p>
</div>

JavaScript API

Input components are standard HTML elements and don't require JavaScript initialization. They work with standard DOM APIs and events.

Form Validation Example

<!-- Form with validation -->
<div class="pm7-form-group">
  <label for="email" class="pm7-label">Email</label>
  <input 
    type="email" 
    id="email" 
    class="pm7-input pm7-input--error" 
    placeholder="Enter your email"
    required
    aria-describedby="email-error"
  >
  <span id="email-error" class="pm7-helper-text pm7-helper-text--error">
    Please enter a valid email address
  </span>
</div>

<!-- Password input with toggle -->
<div class="pm7-form-group">
  <label for="password" class="pm7-label">Password</label>
  <div class="pm7-input-group">
    <input 
      type="password" 
      id="password" 
      class="pm7-input" 
      placeholder="Enter password"
    >
    <button type="button" class="pm7-input-addon" onclick="togglePassword()">
      Show
    </button>
  </div>
</div>

Accessibility

• Always associate labels with inputs using for attribute
• Use semantic HTML5 input types
• Mark required fields with required attribute
• Provide clear error messages
• Ensure proper keyboard navigation
• Use aria-describedby for helper and error text

Copy this link that can be used as documentation for working with this component: