Tabs

A segmented control for switching between views of the same content.

1<template>2  <Tabs3    v-model="active"4    :items="[{ label: 'Overview', value: 'overview' }, { label: 'Activity', value: 'activity' }]"5    :content="false"6    color="neutral"7  />8</template>

Props

Name	Type	Default
items	{ label?, value?, icon?, avatar?, badge?, disabled?, ... }[]	-
modelValue	string \| number	-
content	boolean	true (UTabs's own default)
block	boolean	false
label	string	-
...props	UTabs props (color, size, orientation, unmountOnHide, valueKey, labelKey, ...)	-

Guidelines

Do

Use for a segmented filter control switching between views of the same data.
Use block when the control spans its container (an either-or choice in a form) so every segment is the same width.
Pass label so the control has an accessible name; there is no visible label on a tab strip.

Don't

Don't use tabs to step through a sequential, ordered flow - use Stepper or StepperVertical instead.
Don't hide destructive or primary actions behind a tab a user might not think to check.

Examples

Block

`block` stretches the control across its container and gives every segment the same width, whatever the label length. For an either-or choice in a form; leave it off for a content-sized filter bar.

1<template>2  <Tabs3    v-model="choice"4    :items="[{ label: 'GitHub App', value: 'app' }, { label: 'Personal access token', value: 'pat' }]"5    :content="false"6    color="neutral"7    block8  />9</template>