makeup-tabs

Tabs is headless UI widget and does not come bundled with any CSS. This example is receiving its base markup and styles from eBay Skin. A subset of style properties are being customized/themed via Skin's CSS Custom Properties.

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

Selected State

Tab 1

Tab 2

Tab 3

Panel 1 Title

Panel 1 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

Selected State

Tab 1

Tab 2

Tab 3

Panel 1 Title

Panel 1 Content