ui / makeup-tabs
Tabs is headless UI widget and does not come bundled with any CSS.
Automatic Selection
ARROW keys move the roving tabindex and automatically updated the selected state. This behaviour is similar to a radio button group.
Unselected State
Tab 1
Tab 2
Tab 3
Panel 1 Title
Panel 1 Content
Panel 2 Title
Panel 2 Content
Panel 3 Title
Panel 3 Content
Selected State
Tab 1
Tab 2
Tab 3
Panel 1 Title
Panel 1 Content
Panel 2 Title
Panel 2 Content
Panel 3 Title
Panel 3 Content
Manual Selection
ARROW keys move the roving tabindex. SPACEBAR key is required to manually change the selected state.
Unselected State
Tab 1
Tab 2
Tab 3
Panel 1 Title
Panel 1 Content
Panel 2 Title
Panel 2 Content
Panel 3 Title
Panel 3 Content
Selected State
Tab 1
Tab 2
Tab 3
Panel 1 Title
Panel 1 Content
Panel 2 Title
Panel 2 Content
Panel 3 Title
Panel 3 Content