@gemeente-denhaag/tab NPM

Tabs

Tabs organise and allow users to move between content without having to navigate away from a page.

When to use

Use tabs when you are organisazing related content in a single cointainer or need to flip between multiple panes or sections. It’s a way to group content, connect related information, and is used as a tool to save space.

Alternatives and related components

Use anchor navigation on longer pages with multiple sub-headings when you don’t group the content into groups.

Anatomy

Tabs consists of:

Label: describes the content contained within it.
Line: this line shows the state of a tab
Trailing icon: this icon shows that it is possible to view all tabs that are not visible on the screen
Container

(Interactive) states

Tabs contains the states active, inactive, hover, disabled and focus.

Design properties

Typography

Label inactive: TheSans/md/400
Label active: TheSans/md/700

Color

Label inactive: text color Grey/4
Label active: text color Blue/3
Line inactive: fill color Grey/2
Line active: fill color Blue/3

Interactive states

Hover inactive: label color Blue/3, line color Grey/2
Disabled: label color Grey/2, line color Grey/2
Focus: border color Ocher/5, line color Grey/2

Structure

Label: padding-top and padding bottom 8px, padding-left and padding-right 16px
Line: width 2px, padding-top 8px
Trailing icon: size 16px, padding-left 4px

Mobile

Label (and trailing icon): centered

Accessibility

Tab, shift + tab - to move focus between tabs.
Space or Enter - to display the selected tab's content

Content guidelines

Order the tabs by priority or importance from left to right

Labels

Each tab label needs to describe the content contained within it.
Keep tab labels short and meaningful. Between 1-2 words is best and written in plain language. Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience.
Ensure that each tab label is unique.
Do not use icons in tab labels.
Tab labels shouldn't be longer than one or two words and be accurate in their description.
Tab labels should also make sense when read in isolation.
Never truncate tab labels. If a label overruns the container, find a shorter alternative.
Do use title case for tab labels.

Best practices

Dos

Tabs should:

As a default, there must always be one tab that's already selected and the content panel below it must be visible.
Always be placed above the content it relates to.
Have a minimum number of 2 tabs.
Only one content panel can be shown at a time.
Have the same font size for the label text of each tab
Have one line of text for labels.
Have an order that should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.

Don’ts

Tabs should:

Not be putted underneath the content it relates to.
The order of the tabs from left to right should never change. Only the content panel should change.
Not use two lines of text for labels.
Not use no more than six tabs in most scenarios. This maintains an uncluttered UI and reduces cognitive load for users.
Not be used for primary navigation.

Behavior

The first tab section is selected by default
Only one tab can be selected at a time
Currently selected tab is always highlighted
Tabs are scrollable by default and do not wrap to a second line

References

https://www.bbc.co.uk/gel/guidelines/tabs https://www.carbondesignsystem.com/components/tabs/usage https://www.freshconsulting.com/insights/blog/uiux-principle-21-when-and-when-not-to-use-tabs/

uuid

@infinitebrahmanuniverse/nolb-_gem @everything-registry/sub-chunk-355 @nl-portal/nl-portal-user-interface @gemeente-denhaag/components-react @gemeente-denhaag/denhaag-component-library @gemeente-denhaag/navigation @gemeente-denhaag/storybook @gemeente-denhaag/tabs

10 days ago

17 days ago

17 days ago

23 days ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

10 months ago

10 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

9 months ago

10 months ago

11 months ago

11 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago