Input

1. Overview

The Input component provides a consistent, accessible text input field that follows MYDS design guidelines. It includes multiple states for different user interactions and feedback scenarios.

2. Features

• Multiple States: Default, hover, focus, disabled, and error states
• Accessibility: Proper labels and ARIA attributes
• Dark Mode: Full dark mode support
• Responsive: Adapts to different screen sizes
• Customizable: Easy to style and extend

3. Usage

Basic Input

<div class="myds-input-wrapper">
  <label class="myds-input-label">Label</label>
  <input type="text" class="myds-input" placeholder="Enter text..." />
</div>

Input with Error

<div class="myds-input-wrapper">
  <label class="myds-input-label">Email</label>
  <input type="email" class="myds-input myds-input-error" placeholder="Enter email..." value="invalid" />
</div>

Disabled Input

<div class="myds-input-wrapper">
  <label class="myds-input-label">Disabled</label>
  <input type="text" class="myds-input" placeholder="Cannot edit..." disabled />
</div>

4. Class Reference

5. Accessibility

• Always pair inputs with labels using the myds-input-label class
• Use appropriate type attributes (text, email, password, etc.)
• Include placeholder text for additional context
• Error states should be accompanied by error messages
• Disabled inputs are not focusable or interactive