Input

Text input fields for user data collection.

Basic Input

Full Name

Email Address

Password

<div className="ethio-form-group">
    <label className="ethio-form-label">Full Name</label>
    <input type="text" className="ethio-form-input" placeholder="Enter your name" />
  </div>

Input States

Normal Input

Disabled Input

Readonly Input

Required InputThis field is required

<input type="text" className="ethio-form-input" disabled />
  <input type="text" className="ethio-form-input" readOnly />
  <input type="text" className="ethio-form-input" required />

Input Sizes

<input type="text" className="ethio-form-input" style={{ padding: '0.5rem' }} />
  <input type="text" className="ethio-form-input" />
  <input type="text" className="ethio-form-input" style={{ padding: '1rem' }} />

With Icons

🔍

👁️

API Reference

Class Name	Description
`ethio-form-input`	Base input field style
`ethio-form-label`	Label for input fields
`ethio-form-group`	Container for form input and label

Accessibility

Always use labels with inputs for screen readers
Use appropriate input types (email, password, etc.)
Provide clear placeholder text
Indicate required fields with visual and textual cues
Ensure sufficient color contrast for input text