WUI logo

Tabs

Allows user to make it easy explore and switch between different views.

version

5.6.3

install

yarn add @welcome-ui/tabs

usage

import { Tabs, useTab } from '@welcome-ui/tabs'

About #

See Ariakit for documentation.

Usage #

Set the tab activated by default using selectedId on useTab.

Sizes #

Size is set on Tab.List. Available sizes are sm and md. By default size is set to md.

With no border #

The border on Tab.List is an inset shadow that you can customize or disable via the boxShadow style prop

With a badge #

Add badges, icons and images in tab.

Use another component #

Use another component in tab.

One tab #

Active bar doesn't display with only one tab.

Vertical #

Set the tab orientation by providing the orientation prop to the tab state

useTab #

We use useTab from Ariakit Tab for the state of the Tab.

Pass options to useTab:

  • defaultSelectedId: e.g. const store = useTab({ defaultSelectedId: 'tab2' })

Properties #

Tab #

No props specified

Tab.List #
NameType(s)DefaultRequired
size
"sm"
"md"
md
Tab.Panel #
NameType(s)DefaultRequired
alwaysVisible
Boolean

Determines whether the content element should remain visible even when the `open` state is `false`. If this prop is set to `true`, the `hidden` prop and the `display: none` style will not be applied, unless explicitly set otherwise. This prop is particularly useful when using third-party animation libraries such as Framer Motion or React Spring, where the element needs to be visible for exit animations to work. Live examples: - [Dialog with Framer Motion](https://ariakit.org/examples/dialog-framer-motion) - [Menu with Framer Motion](https://ariakit.org/examples/menu-framer-motion) - [Tooltip with Framer Motion](https://ariakit.org/examples/tooltip-framer-motion) - [Dialog with details & summary](https://ariakit.org/examples/dialog-details)

false
tabId
string

The id of the tab that controls this panel. By default, this value will be inferred based on the order of the tabs and the panels. Live examples: - [Tab with React Router](https://ariakit.org/examples/tab-react-router)

disabled
Boolean

Determines if the element is disabled. This sets the `aria-disabled` attribute accordingly, enabling support for all elements, including those that don't support the native `disabled` attribute. This feature can be combined with the [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled) prop to make disabled elements still accessible via keyboard. Live examples: - [Submenu](https://ariakit.org/examples/menu-nested)

false
autoFocus
Boolean

Automatically focuses the element upon mounting, similar to the native `autoFocus` prop. This addresses an issue where the element with the native `autoFocus` attribute might receive focus before React effects are executed. The `autoFocus` prop can also be used with [Focusable](https://ariakit.org/components/focusable) elements within a [Dialog](https://ariakit.org/components/dialog) component, establishing the initial focus as the dialog opens. Live examples: - [Warning on Dialog hide](https://ariakit.org/examples/dialog-hide-warning) - [Dialog with React Router](https://ariakit.org/examples/dialog-react-router) - [Nested Dialog](https://ariakit.org/examples/dialog-nested)

false
focusable
Boolean

Determines if [Focusable](https://ariakit.org/components/focusable) features should be active on non-native focusable elements. **Note**: This prop only turns off the additional features provided by the [Focusable](https://ariakit.org/components/focusable) component. Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability, but without added features such as improved [`autoFocus`](https://ariakit.org/reference/focusable#autofocus), [`accessibleWhenDisabled`](https://ariakit.org/reference/focusable#accessiblewhendisabled), [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible), etc.

true
accessibleWhenDisabled
Boolean

Indicates whether the element should be focusable even when it is [`disabled`](https://ariakit.org/reference/focusable#disabled). This is important when discoverability is a concern. For example: > A toolbar in an editor contains a set of special smart paste functions that are disabled when the clipboard is empty or when the function is not applicable to the current content of the clipboard. It could be helpful to keep the disabled buttons focusable if the ability to discover their functionality is primarily via their presence on the toolbar. Learn more on [Focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).

onFocusVisible
BivariantCallback<(event: SyntheticEvent<Element, Event>) => void>

Custom event handler invoked when the element gains focus through keyboard interaction or a key press occurs while the element is in focus. This is a programmatic equivalent of the `data-focus-visible` attribute. Live examples: - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)

shouldRegisterItem
Boolean

Whether the item should be registered to the store.

true
getItem
(props: Item) => Item

A memoized function that returns props that will be passed along with the item when it gets registered to the store. @example ```jsx const store = useCollectionStore(); const getItem = useCallback((item) => ({ ...item, custom: true }), []); <CollectionItem store={store} getItem={getItem} /> ```

Packages #

Dependencies #
Peer dependencies #

Previous

Pagination

Next

Emoji