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

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.

React Usage

import { Input, Label, FormGroup, HelperText } from '@pm7/react';

function MyForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  return (
    <FormGroup>
      <Label htmlFor="email">Email</Label>
      <Input
        id="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        error={!!error}
        placeholder="Enter your email"
      />
      {error && <HelperText variant="error">{error}</HelperText>}
    </FormGroup>
  );
}

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: