Proton

Forms

Use paragraphs and lists to gives forms a sensible structure.

Always include a label before a form field – the placeholder attribute is not a substitute for a label. Labels are styled as display: block; in Proton so they will appear above their control, which is generally the best place for them.

A super-simple form

Field Label Submit

Fake comment form

Your made up name

Your horrible comments

Submit

For checkboxes and radio buttons, wrap the label element around the input with the label text after the control.

• Option one
• Option two

• Option one
• Option two

Inline controls

You can use the inline class on a list to arrange controls on the same baseline. This is handy for a small set of options or two or three related fields in a longer form.

• A
• B
• C
• D

1. Given name
2. Family name

The inline class also overrides the block styling of labels, but don't abuse it for this purpose. Remember, Proton is for prototyping, not polished design - think about how your forms should work, not how they should look. Only arrange controls on the same baseline when it makes sense to read them that way.

More complex forms

Use fieldset to group related controls. You can nest fieldsets within fieldsets for groups within groups, but don't go too crazy.

Newsletter subscription

1. Name
2. E-mail
3. Language select Deutsch English Español Français 日本語 tlhIngan Hol
4. Format

   • Text
   • HTML
5. I agree to the privacy policy
6. Subscribe