Tabs
Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.
Usage ¶
Tabs are built using the Tab.Group, Tab.List, Tab, and Tab.Panel components. Clicking on any tab or selecting it with the keyboard will activate the corresponding panel.
Disabling a tab ¶
To disable a tab, use the disabled attribute on the Tab component. Disabled tabs cannot be selected with the mouse, and are also skipped when navigating the tab list using the keyboard.
Manually activating tabs ¶
By default, tabs are automatically selected as the user navigates through them using the arrow kbds.
If you'd rather not change the current tab until the user presses Enter or Space, use the manual attribute on the Tab.Group component.
Remember to add styles to the :focus state of the tab so is clear to the user that the tab is focused.
The manual prop has no impact on mouse interactions — tabs will still be selected as soon as they are clicked.
Tab.List Position ¶
You can choose on which side of the tab panels the Tab.List is rendered by setting the position attribute on the Tab.List component.
Top (default) ¶
Bottom ¶
Left ¶
Right ¶
Tab.List Align ¶
You can also choose if you want the tabs to aligned to the start of the list (the default), center or to the end, by setting the align attribute on the Tab.List component.
Controlling the tabs with a <select> ¶
In narrow screens, you might want to hide the tabs and display a <select> element instead. To do so, use the Tab.Select and Tab.Option components.
A Tab.Select component is a wrapper for a <select> element, and it accepts Tab.Option components as children.
Component arguments ¶
Tab.Group ¶
| Argument | Type | Description |
|---|---|---|
tag |
str |
HTML tag used for rendering the wrapper. Default is div. |
Tab.List ¶
| Argument | Type | Description |
|---|---|---|
position |
str |
top, right, botton, or left. Default is top. |
align |
str |
start, center, or end. Default is start. |
manual |
bool |
If true, selecting a tab with the keyboard won't activate it, you must press Enter os Space kbds to do it. Default is false. |
tag |
str |
HTML tag used for rendering the wrapper. Default is nav. |
Tab ¶
| Argument | Type | Description |
|---|---|---|
target |
str |
Required. HTML id of the panel associated with this tab. |
selected |
bool |
Initially selected tab. Only one tab in the Tab.List can be selected at the time. Default is false. |
disabled |
bool |
If the tab can be selected. Default is false. |
tag |
str |
HTML tag used for rendering the tab. Default is button. |
Tab.Panel ¶
| Argument | Type | Description |
|---|---|---|
hidden |
bool |
Initially hidden panel. Default is false. |
tag |
str |
HTML tag used for rendering the panel. Default is div. |
Tab.Select ¶
No arguments.
Tab.Option ¶
| Argument | Type | Description |
|---|---|---|
target |
str |
Required. HTML id of the panel associated with this tab. |
disabled |
bool |
Display the option but not allow to select it. |
Events ¶
The tab group emits a tab:selected event every time is selected. The event contains the target property with the tag node.
document.addEventListener("jxui:tab:selected", (event) => {
console.log(`'${event.target.textContent}' tab selected`);
});
Accessibility notes ¶
Mouse interaction ¶
Clicking a Tab will select that tab and display the corresponding Tab.Panel.
Keyboard interaction ¶
All interactions apply when a Tab component is focused.
| Command | Description |
|---|---|
| ← / ↑ arrow | Selects the previous non-disabled tab, cycling from first to last. |
| → / ↓ arrow | Selects the next non-disabled tab, cycling from last to first. |
| Enter or Space when `manual` is set. | Activates the selected tab. |
| Home or PageUp | Activates the **first** non-disabled tab. |
| End or PageDown | Activates the **last** non-disabled tab. |
Components ¶
Component |
File |
Source |
|---|---|---|
Tab |
tab/index.jinja |
|
Tab.Group |
tab/group.jinja |
|
Tab.List |
tab/list.jinja |
|
Tab.Panel |
tab/panel.jinja |
|
Tab.Select |
tab/select.jinja |
|
Tab.Option |
tab/option.jinja |
|
tab/tab.css |
||
tab/tab.js |