Forms

Login form

Form fields vary in sizes and can be applied flexibly depending on the context. The below example is a simple login form with large sized field and submit button. Labels above fields are optional, however a placeholder text must be used if the label is omitted.

Size vary depending on level of emphasize and context
Placeholder text must be used if labels are omitted

Sign in to your account

Email

Password Forgot password?

Stay signed in

Use single sign-on (SSO) instead

Don't have an account? Sign up

<div class="radius-md bg-snow-gradient px-5 pt-17 pb-19">
  <img src="/assets/img/logo-dark.svg" class="w-auto h-8 mx-auto mb-11" />
  <div class="bg-white shadow-3 radius-md max-w-400px m-auto overflow-hidden mb-8 p-8 xs.px-10 py-10">
    <h2 class="font-xl font-500 align-center mb-8">
      Sign in to your account
    </h2>
    <div>
      <div class="mb-7 last.mb-0">
        <label class="label mb-2">Email</label>
        <input class="input input-lg" type="email" placeholder="" required>
      </div>
      <div class="mb-7 last.mb-0">
        <label class="label flex align-items-center justify-content-between mb-2">
          Password
          <a class="font-xs font-500 color-blueberry-500">Forgot password?</a>
        </label>
        <input class="input input-lg" type="password" placeholder="" required>
      </div>
      <div class="mb-7 last.mb-0">
        <label class="checkbox font-sm">
          <input type="checkbox">
          <div class="checkbox__checkmark"></div>
          Stay signed in
        </label>
      </div>
      <div class="mb-4 last.mb-0 flex justify-content-end">
        <button class="btn btn-lg btn-secondary w-100p">
          Sign in
        </button>
      </div>
    </div>
    <div class="align-center pt-10">
      <a class="font-500 font-sm color-blueberry-500">
        Use single sign-on (SSO) instead
      </a>
    </div>
  </div>
  <p class="align-center font-sm">
    Don't have an account? <a class="font-500 color-blueberry-500">Sign up</a>
  </p>
</div>

Form fields

The below example is a list of all the different field designs we support inside the dashboard. The toggle slide checkbox should only be used in situations where enabling would cause an immediate action.

Only use toggle slide checkboxes for immediate action
Keep label text short and concise

<div class="radius-md bg-white px-5 py-14">
  <form class="max-w-400px mx-auto">
    <div class="mb-6 last.mb-0">
      <label class="label mb-2">Email</label>
      <input class="input" placeholder="Email" value="Placeholder Text">
    </div>
    <div class="mb-6 last.mb-0">
      <label class="checkbox font-sm">
        <input type="checkbox" checked="" required="">
        <div class="checkbox__checkmark"></div>
        Checkbox
      </label>
    </div>
    <div class="mb-6 last.mb-0">
      <label class="radio font-sm mr-4">
        <input type="radio" name="radio" checked="">
        <div class="radio__checkmark"></div>
        Radio
      </label>
      <label class="radio font-sm">
        <input type="radio" name="radio" checked="">
        <div class="radio__checkmark"></div>
        Radio
      </label>
    </div>
    <div class="mb-6 last.mb-0">
      <label class="toggle">
        <input type="checkbox" checked="">
        <div class="toggle__switch"></div>
      </label>
    </div>
    <div class="mb-6 last.mb-0">
      <div class="select">
        <select>
          <option selected="">Selected</option>
          <option>Option</option>
          <option>Option</option>
        </select>
        <div class="select__angle"></div>
      </div>
    </div>
  </form>
</div>

Disabled fields

All field types can be disabled with the disabled attribute. Do not apply any colors on disabled fields, only the colors shown in the example are allowed.

Append the disabled attribute to disable fields
Do not introduce colors to disabled fields

<div class="radius-md bg-white px-5 py-14">
  <form class="max-w-400px mx-auto">
    <div class="mb-6 last.mb-0">
      <label class="label mb-2">Email</label>
      <input class="input" placeholder="Email" value="Placeholder Text" disabled>
    </div>
    <div class="mb-6 last.mb-0">
      <label class="checkbox pointer-events-none font-sm">
        <input type="checkbox" checked="" required="" disabled>
        <div class="checkbox__checkmark"></div>
        Checkbox
      </label>
    </div>
    <div class="mb-6 last.mb-0">
      <label class="radio pointer-events-none font-sm mr-4">
        <input type="radio" name="radio" checked="" disabled>
        <div class="radio__checkmark"></div>
        Radio
      </label>
      <label class="radio pointer-events-none font-sm">
        <input type="radio" name="radio" checked="" disabled>
        <div class="radio__checkmark"></div>
        Radio
      </label>
    </div>
    <div class="mb-6 last.mb-0">
      <label class="toggle pointer-events-none">
        <input type="checkbox" checked="" disabled>
        <div class="toggle__switch"></div>
      </label>
    </div>
    <div class="mb-6 last.mb-0">
      <div class="select">
        <select disabled>
          <option selected="">Selected</option>
          <option>Option</option>
          <option>Option</option>
        </select>
        <div class="select__angle"></div>
      </div>
    </div>
  </form>
</div>

Field sizes

There are five text field sizes to choose from. By default, use the medium size fields for common forms. Large size fields are reserved for short and one-off forms such as the sign in pages. Other sizes are reserved for special situations only.

Use medium size fields for common forms
Do not mix field sizes

<div class="radius-md bg-white px-5 py-14">
  <div class="grid grid-cols-1 gap-5 max-w-400px mx-auto">
    <input class="input input-xs" placeholder="Email" value="Placeholder Text">
    <input class="input input-sm" placeholder="Email" value="Placeholder Text">
    <input class="input input-md" placeholder="Email" value="Placeholder Text">
    <input class="input input-lg" placeholder="Email" value="Placeholder Text">
    <input class="input input-xl" placeholder="Email" value="Placeholder Text">
  </div>
</div>

Field states

Text and select fields can have three states, success, warning, and danger. Field states should only be activated post submission.

Activate state only after submission

<div class="radius-md bg-white px-5 py-14">
  <div class="grid grid-cols-1 gap-5 max-w-400px mx-auto">
    <input class="input is-success" placeholder="Success">
    <input class="input is-warning" placeholder="Warning">
    <input class="input is-danger" placeholder="Danger">
  </div>
</div>