Forms elements
Field states
There is an error. There is an error.
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
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” input
s 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" />