Text field

Amazium ensures text fields are uniform, accessible, and easy to use across all browsers.

Full-width by default for better responsiveness
Clear labels and placeholders for guidance
Styled focus states to enhance visibility
Disabled and error states for better UX

Default Text Field

<fieldset>
  <label for="text">Label</label>
  <div class="input">
    <input type="text" name="text" id="text" placeholder="Input" />
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Disabled Text Field

<fieldset>
  <label for="text">Label</label>
  <div class="input">
    <input type="text" name="text" id="text" placeholder="Input" />
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Invalid Text Field

<fieldset class="invalid">
  <label for="text">Label</label>
  <div class="input">
    <input type="text" name="text" id="text" placeholder="Input" />
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>