Forms

All forms come with a set of standard styles for common form elements.

Input Fields

Example

Jinja

<form>
  <div class="input-field">
    <label for="form-example-text">Text field</label>
    <input type="text" id="form-example-text" placeholder="Placeholder">
  </div>

  <div class="input-field">
    <label for="form-example-disabled">Disabled field</label>
    <input type="text" id="form-example-disabled" value="Disabled" disabled>
  </div>

  <div class="input-field">
    <label for="form-example-read-only">Read-only field</label>
    <input type="text" id="form-example-read-only" value="Read-only" readonly>
  </div>
</form>

HTML

<form>
  <div class="input-field">
    <label for="form-example-text">Text field</label>
    <input type="text" id="form-example-text" placeholder="Placeholder" />
  </div>

  <div class="input-field">
    <label for="form-example-disabled">Disabled field</label>
    <input type="text" id="form-example-disabled" value="Disabled" disabled />
  </div>

  <div class="input-field">
    <label for="form-example-read-only">Read-only field</label>
    <input type="text" id="form-example-read-only" value="Read-only" readonly />
  </div>
</form>

---

Password Field

Example

Jinja

<form>
  <div class="input-field">
    <label for="form-example-password">Password</label>
    <div class="password-input">
      <input name="password" type="password" id="form-example-password">
      <button type="button"
              class="icon toggle"
              id="form-example-password-toggle"
              title="{{ _('Show password') }}"
              aria-label="{{ _('Show password') }}"
              data-active-title="{{ _('Hide password') }}"
              data-active-aria-label="{{ _('Hide password') }}">
        <span class="inactive" aria-hidden="false">
          {{ include_static('django_logikal/icons/eye-off.svg') }}
        </span>
        <span class="active" aria-hidden="true">
          {{ include_static('django_logikal/icons/eye.svg') }}
        </span>
      </button>
    </div>
    <div class="helptext" id="form-example-password-helptext">
      <a href="/account/password/reset/">{{ _('Forgot your password?') }}</a>
    </div>
  </div>
</form>

HTML

<form>
  <div class="input-field">
    <label for="form-example-password">Password</label>
    <div class="password-input">
      <input name="password" type="password" id="form-example-password" />
      <button
        type="button"
        class="icon toggle"
        id="form-example-password-toggle"
        title="Show password"
        aria-label="Show password"
        data-active-title="Hide password"
        data-active-aria-label="Hide password">
        <span class="inactive" aria-hidden="false">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-eye-off preview-icon">
            <path
              d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
            <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
            <path
              d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
            <path d="m2 2 20 20" />
          </svg>
        </span>
        <span class="active" aria-hidden="true">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-eye preview-icon">
            <path
              d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
            <circle cx="12" cy="12" r="3" />
          </svg>
        </span>
      </button>
    </div>
    <div class="helptext" id="form-example-password-helptext">
      <a href="/account/password/reset/">Forgot your password?</a>
    </div>
  </div>
</form>

---

Errors

The standard styles make sure that regular Django form errors render just fine.

Example

Jinja

<form>
  <h1>Log in</h1>

  <ul class="errors nonfield">
    <li>Invalid password!</li>
    <li>A password must be provided.</li>
  </ul>

  <div class="input-field">
    <label for="form-auth-email">Email address</label>
    <input name="email" type="email" placeholder="email@example.com" id="form-auth-email">
    <ul class="errors">
      <li>Invalid email address!</li>
      <li>The email address must be provided.</li>
    </ul>
  </div>

  <button type="submit" id="form-auth-action" class="active">Next</button>
</form>

HTML

<form>
  <h1>Log in</h1>

  <ul class="errors nonfield">
    <li>Invalid password!</li>
    <li>A password must be provided.</li>
  </ul>

  <div class="input-field">
    <label for="form-auth-email">Email address</label>
    <input
      name="email"
      type="email"
      placeholder="email@example.com"
      id="form-auth-email" />
    <ul class="errors">
      <li>Invalid email address!</li>
      <li>The email address must be provided.</li>
    </ul>
  </div>

  <button type="submit" id="form-auth-action" class="active">Next</button>
</form>

---