MenuCaderno UI
npmGitHub
Theme

<cad-tabs> family

Tabs

Switch between related panels without leaving the page.

Architecture review workspace

OverviewEvidenceNotesRollout

Use an asynchronous search index

Store writes in the database and update the search index in the background. Show when results were last indexed.

The index returns queries faster, but adds a delay before new notes appear.How long can users wait for a new note to appear in search?Start with one workspace. Check query times and indexing errors before expanding.

API reference: <cad-tabs>

default-valuedefaultValuestring''valuevaluestring''defaultValuestringdefault-valuenovaluestringvalueyescad-tab-changeCustomEventFired after an interactive value change.(default)One `cad-tabs-list` and matching `cad-tab-content` children.

API reference: <cad-tabs-list>

labellabelstring'Tabs'labelstringlabelno(default)`cad-tab-trigger` children.listNative tab-list container.

API reference: <cad-tab-trigger>

activeactivebooleanfalsedisableddisabledbooleanfalselabellabelstring''tonetoneCadTabTone'accent'valuevaluestring''activebooleanactiveyescontrolsstring—nodisabledbooleandisabledyeslabelstringlabelnotoneCadTabTonetoneyesvaluestringvalueyescad-tab-requestCustomEventRequests activation or keyboard navigation from `cad-tabs`.(default)Visible tab label. Falls back to the `label` attribute.endOptional trailing content.startOptional leading content.tabNative tab button.

API reference: <cad-tab-content>

activeactivebooleanfalselabellabelstring''valuevaluestring''activebooleanactiveyeslabelstringlabelnovaluestringvalueyes(default)Panel content.panelNative tab panel.--cad-tabs-panel-bgPanel surface.

Accessibility

Arrow keys, Home, and End move focus between enabled tabs. Each tab is linked to its panel.

MIT licensed. Built with Caderno UI.Report an issue
Back to top