Design system

Forms elements

Field states

There is an error. There is an error.
There is an error. There is an error.
Are you sure? Hold your breath and count again.

Different form inputs

@protonmail.com
Mastercard
Mastercard
No money?
There is an error.
There is an error.
There is an error.
Do you speak martian?
Day checkbox

⚠⚠ when using radios and checkboxes (design is made by “fake” elements), please do include “real” and “fake” inputs in the label, otherwise people won’t be able to use the input.

<label for="id_of_my_field" class="inline-flex relative">
  <input type="checkbox" class="pm-checkbox" id="id_of_my_field">
  <span class="pm-checkbox-fakecheck">
    …
  </span>
  I agree to check this
</label>

⚠⚠ when using radios, please remember to be explicit or to link radios to their description (via fielset, aria-describedby, etc.).

<span class="pm-label" id="question">
  Do you speak martian?
</span>
<label for="id_yes" class="mr2 inline-flex">
  <input type="radio" name="martian" class="pm-radio" id="id_yes" value="yaisse" aria-describedby="question">
  <span class="pm-radio-fakeradio"></span>
  Yes
</label>
<label for="id_no" class="inline-flex">
  <input type="radio" name="martian" class="pm-radio" id="id_no" value="nooooo" aria-describedby="question">
  <span class="pm-radio-fakeradio"></span>
  No
</label>
Default composer

Field sizes

Add pm-field--large or pm-field--small/pm-field--tiny to the input:

<input type="text" class="pm-field pm-field--small" value="A field" />

Toggle states