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 |