Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTabs that become a labelled native select below a breakpoint, sharing the same value and panel so resizing keeps the person's place.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for sections that are alternatives and number more than four, in pages that must work on phones.
Do not use it for two or three tabs, which fit anywhere, or for tabs that must stay visible while scrolling.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | { value, label, content }[] | - | Sections. |
label | string | Section | Label of the select. |
breakpoint | number | 640 | Width in px below which the select is used. |
matchMedia and listened to, so rotating a tablet switches modes without a reload.| Key | Action |
|---|---|
| Wide | arrow keys move between tabs |
| Narrow | the system picker chooses the section |
The pattern ships a Testing Library test (tabs-responsive-select.test.tsx) that covers tabs when wide, the labelled select when narrow and changing sections.