Skip to main content

Inputs

Input Field

Based on Bootstrap 4. Same shape and outline. We substitute Roboto Light #000000 for text at L or S size per breakpoint size. Helper text is #333333 Roboto Light. Either standard or small size. Labels appear directly above the field (no side-by-side). May or may note use the ‘sub label’ below. I’ll write a text spec if we do.

We'll never share your email with anyone else.

We'll never share your email with anyone else.

Input Selector

Based on Bootstrap 4. Same shape and outline. We substitute Roboto Light #000000 for text at L or S size per breakpoint size. Either standard or small size. Nearly all labels appear above.

Input Text

Based on Bootstrap 4. Same shape and outline. We substitute Roboto Light #000000 for text at L or S size per breakpoint size. Either standard or small size. Nearly all labels appear above.

Radio Buttons / Checkboxes

Based on Bootstrap 4. Same shape, outline, spacing. We substitute Roboto Light #000000 for text at L or S size per breakpoint size. Instead of larger, touch-friendly sizes for mobile, let’s try making the component and the label clickable.

Validation

Bootstrap-style. Substitute Roboto Light in appropriate L/S sizes per breakpoint. No plans yet to use ‘warning’. Danger color is REDRUM. Success color is Kermit. No spec yet on the lower text.

This field is required