Tabs
Tabs organize content across different screens and views
Use Cases
- Users should be able to:
- Use a keyboard to navigate between tabs
- Tab between the active tab and the tab panel
- Not see animations if they have motion sensitivity
Avoid applying density to tabs
Don't apply density to tabs by default — this lowers their targets below our best practice of 48x48 CSS pixels. Instead, give people a way to choose a higher density, like selecting a denser layout or changing the theme.
To ensure that this density setting can be easily reverted when it's active, keep all the targets to change it at minimum 48x48 CSS pixels each.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Navigate between the active tab and the active tab panel. |
| Space / Enter | Actives the currently focused Tab. |
| Arrows | Navigate between the tabs. |
Use Cases
- Users should be able to:
- Use a keyboard to navigate between tabs
- Tab between the active tab and the tab panel
- Not see animations if they have motion sensitivity
Avoid applying density to tabs
Don't apply density to tabs by default — this lowers their targets below our best practice of 48x48 CSS pixels. Instead, give people a way to choose a higher density, like selecting a denser layout or changing the theme.
To ensure that this density setting can be easily reverted when it's active, keep all the targets to change it at minimum 48x48 CSS pixels each.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Navigate between the active tab and the active tab panel. |
| Space / Enter | Actives the currently focused Tab. |
| Arrows | Navigate between the tabs. |
Use Cases
- Users should be able to:
- Use a keyboard to navigate between tabs
- Tab between the active tab and the tab panel
- Not see animations if they have motion sensitivity
Avoid applying density to tabs
Don't apply density to tabs by default — this lowers their targets below our best practice of 48x48 CSS pixels. Instead, give people a way to choose a higher density, like selecting a denser layout or changing the theme.
To ensure that this density setting can be easily reverted when it's active, keep all the targets to change it at minimum 48x48 CSS pixels each.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Navigate between the active tab and the active tab panel. |
| Space / Enter | Actives the currently focused Tab. |
| Arrows | Navigate between the tabs. |
Use Cases
- Users should be able to:
- Use a keyboard to navigate between tabs
- Tab between the active tab and the tab panel
- Not see animations if they have motion sensitivity
Avoid applying density to tabs
Don't apply density to tabs by default — this lowers their targets below our best practice of 48x48 CSS pixels. Instead, give people a way to choose a higher density, like selecting a denser layout or changing the theme.
To ensure that this density setting can be easily reverted when it's active, keep all the targets to change it at minimum 48x48 CSS pixels each.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Navigate between the active tab and the active tab panel. |
| Space / Enter | Actives the currently focused Tab. |
| Arrows | Navigate between the tabs. |