Input

Material Design 3 form input components with outlined and filled variants

Input

Form inputs allow users to enter text. @duskmoon-dev/core provides Material Design 3 input variants and complete form components.

Basic Usage

Basic Input

Input Variants

Filled Input (Default)

Filled inputs have a background color:

Filled Input

Outlined Input

Outlined inputs have a border:

Outlined Input

Sizes

Three sizes are available:

Input Sizes

Input States

Error State

Error State

Success State

Success State

Disabled State

Disabled State

Complete Input Group

Combine label, input, and helper text:

Input Group

Choose a unique username

Input with Error

Input with Error

Please enter a valid email address

Input with Success

Input with Success

Strong password!

Textarea

Multi-line text input:

Textarea

Textarea with Label

Textarea with Label

Maximum 500 characters

Select

Dropdown selection:

Select

Select with Label

Select with Label

Checkbox

Checkbox

Checkbox Group

Checkbox Group

Select your interests:

Radio Buttons

Radio Buttons

Choose a plan:

Form Examples

Login Form

Login Form

Sign In

Don't have an account? Sign up

Contact Form

Contact Form

Contact Us

Please provide as much detail as possible

Survey Form

Survey Form

Product Feedback Survey

Best Practices

Labels

Always provide labels for inputs:

Input Labels

Helper Text

Use helper text for additional guidance:

Helper Text

Must be 3-20 characters, letters and numbers only

Error Handling

Provide clear error messages:

Error Handling

Password must be at least 8 characters

Accessibility

  • Always use proper <label> elements
  • Provide helpful error messages
  • Use appropriate input types (email, tel, url, etc.)
  • Add aria-describedby for helper text
  • Use aria-invalid for error states

Framework Examples

React with Validation

import { useState } from 'react';

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

  const validateEmail = (value: string) => {
    if (!value) {
      setError('Email is required');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      setError('Please enter a valid email');
    } else {
      setError('');
    }
  };

  return (
    <div className="input-group">
      <label className="input-label" htmlFor="email">Email</label>
      <input
        type="email"
        id="email"
        className={`input input-outlined ${error ? 'input-error' : ''}`}
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        onBlur={(e) => validateEmail(e.target.value)}
        aria-invalid={!!error}
        aria-describedby={error ? 'email-error' : undefined}
      />
      {error && (
        <span id="email-error" className="input-error-message" role="alert">
          {error}
        </span>
      )}
    </div>
  );
}

API Reference

Class Names

ClassDescription
.inputBase input styles (filled variant)
.input-outlinedOutlined input variant
.input-smSmall size
.input-mdMedium size (default)
.input-lgLarge size
.input-errorError state
.input-successSuccess state
.textareaMulti-line text input
.textarea-outlinedOutlined textarea
.selectDropdown select
.select-outlinedOutlined select
.checkboxCheckbox input
.radioRadio button input
.input-groupContainer for label + input + helper
.input-labelInput label
.input-helperHelper text
.input-error-messageError message text
  • Button - Form submission buttons
  • Card - Form containers
  • Alert - Form-level errors

See Also