Tabs
Underlined or pill tabs with arrow-key navigation.
import
import { Tabs, TabList, Tab, TabPanel } from '@joshicodes/cock';Variants
Panels only render while selected. Try the arrow keys once a tab has focus.
The underlined variant suits page-level navigation.
The last 7 days.
Keyboard
- ← →
- Moves to the previous or next tab and selects it
- Home / End
- First and last tab
Behaviour
- Panels only render while selected, so an expensive panel costs nothing until it is opened.
- The strip scrolls sideways when the tabs do not fit, rather than wrapping or overflowing.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
<Tabs>
Props
| Prop | Type | Default |
|---|---|---|
value bindable | string | '' |
variant | TabsVariant | 'line' |
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
<TabList>
Props
| Prop | Type | Default |
|---|---|---|
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
<Tab>
Props
| Prop | Type | Default |
|---|---|---|
value required | string | — |
disabled | boolean | false |
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |
<TabPanel>
Props
| Prop | Type | Default |
|---|---|---|
value required | string | — |
class | string | — |
Snippets
| Snippet | Type | Default |
|---|---|---|
children | Snippet | — |