Input

<div class="field">
  <label for="project-name">
    Project name
  </label>
  <input
    class="input"
    id="project-name"
    name="project"
    type="text"
    placeholder="Website refresh"
    aria-describedby="project-help"
  >
  <p id="project-help" class="muted">
    Choose a name your team will recognize.
  </p>
</div>

<div class="grid">
  <div class="field">
    <label for="full-name">
      Full name
    </label>
    <input class="input" id="full-name" name="name" autocomplete="name">
  </div>
  <div class="field">
    <label for="email">
      Email address (required)
    </label>
    <input
      class="input"
      id="email"
      name="email"
      type="email"
      autocomplete="email"
      required
      placeholder="[email protected]"
    >
  </div>
</div>

<div class="field">
  <label for="invalid-email">
    Email address
  </label>
  <input
    class="input"
    id="invalid-email"
    name="email"
    type="email"
    autocomplete="email"
    value="alex@"
    aria-invalid="true"
    aria-describedby="email-error"
  >
  <p class="field-error" id="email-error">
    Error: enter a complete email address, such as [email protected].
  </p>
</div>

<div class="grid">
  <div class="field">
    <label for="locked-name">
      Workspace name
    </label>
    <input
      class="input"
      id="locked-name"
      name="workspace"
      value="Design team"
      disabled
      aria-describedby="locked-help"
    >
    <p id="locked-help" class="muted">
      Only the workspace owner can change this.
    </p>
  </div>
  <div class="field">
    <label for="reference">
      Reference
    </label>
    <input class="input" id="reference" name="reference" value="PROJECT-1042" readonly>
  </div>
</div>

<div class="grid">
  <div class="field">
    <label for="default-input">
      Default
    </label>
    <input class="input" id="default-input" name="default">
  </div>
  <div class="field">
    <label for="large-input">
      Large
    </label>
    <input class="input input-large" id="large-input" name="large">
  </div>
</div>

<div class="field" dir="rtl" lang="he">
  <label for="hebrew-name">
    שם מלא
  </label>
  <input
    class="input"
    id="hebrew-name"
    name="name"
    autocomplete="name"
    placeholder="הזינו את שמכם"
  >
  <p class="muted">
    השתמשו בשם המועדף עליכם.
  </p>
</div>

<div class="field" data-motion="none">
  <label for="quiet-input">
    Project title
  </label>
  <input class="input" id="quiet-input" name="title" placeholder="Enter a title">
</div>