Input

Text inputs allow users to enter and edit text. They are one of the most fundamental form elements.

Usage

Use inputs for single-line text entry. For longer content, consider using a textarea instead.

Basic Input

<input type="text" class="df-input" placeholder="Enter your name">

With Label

Always associate inputs with labels for accessibility.

Email Address

<label class="df-label" for="email-input">Email Address</label>
<input type="email" id="email-input" class="df-input" placeholder="you@example.com">

Sizes

Inputs come in three sizes: small, medium (default), and large.

<input type="text" class="df-input df-input--sm" placeholder="Small">
<input type="text" class="df-input" placeholder="Medium">
<input type="text" class="df-input df-input--lg" placeholder="Large">

States

Disabled

<input type="text" class="df-input" placeholder="Disabled input" disabled>

Read-only

<input type="text" class="df-input" value="Read-only value" readonly>

Error State

Please enter a valid email address

<input type="text" class="df-input df-input--error" value="Invalid value">
<span class="df-input-error">Please enter a valid email address</span>

Success State

<input type="text" class="df-input df-input--success" value="Valid input">

With Icons

<div class="df-input-group">
  <span class="df-input-icon">
    <svg><!-- search icon --></svg>
  </span>
  <input type="text" class="df-input df-input--with-icon" placeholder="Search...">
</div>

Input Types

Helper Text

PasswordMust be at least 8 characters

<label class="df-label" for="password-input">Password</label>
<input type="password" id="password-input" class="df-input">
<span class="df-input-helper">Must be at least 8 characters</span>

Accessibility

• Always use <label> elements with inputs
• Use aria-describedby to link helper/error text
• Provide clear error messages
• Ensure sufficient color contrast
• Support keyboard navigation

Best Practices

• Use appropriate input types (email, tel, url) for better mobile keyboards
• Provide placeholder text as a hint, not a replacement for labels
• Show validation feedback inline, near the input
• Mark required fields clearly

API Reference

Classes

Class	Description
df-input	Base input class (required)
df-input--sm	Small size
df-input--lg	Large size
df-input--error	Error state
df-input--success	Success state
df-input--with-icon	Input with left icon
df-input--with-icon-right	Input with right icon

CSS Custom Properties

Property	Default	Description
--df-input-padding-x	0.875rem	Horizontal padding
--df-input-padding-y	0.625rem	Vertical padding
--df-input-font-size	0.875rem	Font size
--df-input-radius	0.375rem	Border radius
--df-input-border-color	var(--df-gray-300)	Border color
--df-input-focus-ring	var(--df-primary)	Focus ring color