Returnless UI

Tabs ​

Use to alternate among related views within the same context.

Props
modelValue?:
string | null
Defaults to unknown
disabled?:
boolean
Defaults to false
Whether the input is disabled.
error?:
string | null
Defaults to null
The error to display below the input.
helpText?:
string | null
Defaults to null
The help text to display below the input.
id?:
string | null
Defaults to null
The ID of the input the label is associated with.
label:
string
Defaults to unknown
The label text.
labelHidden?:
boolean
Defaults to false
Whether the label is hidden.
name:
string
Defaults to unknown
The name of the input.
placeholder?:
string | null
Defaults to null
The placeholder text.
readonly?:
boolean
Defaults to false
Whether the input is read-only.
required?:
boolean
Defaults to false
Whether the input is required.
Events
update:modelValue:
[value: string | null]

Usage ​

js
<script lang="ts" setup>
import { Tabs, TabTrigger } from '@returnless/focus-ui';
</script>

<template>
  <Tabs>
    <TabTrigger active>Apple</TabTrigger>
    <TabTrigger>Banana</TabTrigger>
    <TabTrigger>Pineapple</TabTrigger>
  </Tabs>
</template>

Best Practices ​

Tabs should:

  • Represent the same kind of content, such as a list-view with different filters applied. Don't use tabs to group content that is dissimilar.
  • Only be active one at a time.
  • Not force users to jump back and forth to do a single task. Users should be able to complete their work and find what they need under each tab.
  • Not be used for primary navigation.

Content guidelines ​

Tabs should:

  • Be clearly labeled to help differentiate the different sections beneath them.
  • Have short and scannable labels, generally kept to single word.
  • Relate to the section of the content they represent.