Grouping and layout

Specific field types

Input widths

Size a text field or a text box so that it's indicative of how much text goes inside of it.

Input type 2/3 column
(main content area)
1/3 column
(secondary content area)
1/2 column
(main content, small screen)
1 column
(main & secondary content, small screen)
text field - 'normal' full, half, or quarter width full or half width full or half width full width
text field - date picker half width full width full width full width
text field - multi selects full width full width full width full width
2 text fields - date range full width full width full width full width
text box full width full width full width full width
select box ('regular' and select2) full, half, or quarter width full or half width full or half width full width
checkbox - single full width full width full width full width
checkbox - list full width full width full width full width
radio button - list full width full width full width full width