mi6
Create size variants for input components
Summary
Most components have three size options: medium, small and large. Our input components only currently have default and small versions. Review all input components and provide designs for missing sizes.
💬 Description
Components should aim to use the following vertical sizings when they occupy a single line: Medium: 40px Small: 32px Large: 48px
Review:
- Text fields
- Selects
- Checkboxes
- Radio buttons
- Date inputs
- Buttons
- Breadcrumb
- Chips
- Status tags
- Link
- Pagination
- Search bar
- Skeleton
- Switch
- Tabs?
Not all components will require changes, but need to check that they are all consistent with one another.
💰 Use value
The purpose of size variants is to control the vertical size of components and allow different information densities to be achieved. By keeping sizing consistent across components, it makes it easier to layout components following the vertical rhythm guidance.
Additional info
Tell us anything else useful to help us understand your suggestion.
The following have no size variants;
- Breadcrumb
- Card vertical
- Link
- Pagination
- Skeleton
- Tabs
The following components have 2 sizes;
- data list
- radio button
- text field
- table of contents
Correct - no change needed to these... The following components have 3 sizes; small/medium/large
- button
- card horizontal
- checkbox
- chip
- date input
- date picker
- drawer
- search bar
- select
- status tags
- switch
- time input
- time picker
- toggle button
- tree view
