Vai al contenuto
Italia daisy
Storybook
Tema
  • Italia
  • daisyUI

Componente

Tabs

Schede su radio button nativi con daisyUI tabs: il pannello visibile segue il radio selezionato. Stile .italia sottolineato o a schede, anche con icone. Per le sezioni su pagine diverse ci sono le schede come link.

Riferimento
<it-tabs>, <it-tab-item>, <it-tab-panel>
Classi
ita-tabsita-tabs-cardita-tabs-fillita-tabs-stackedita-tabs-nav
Basato su (daisyUI)
tabstabtab-contenttabs-bordertabs-lifttab-disabled
Solo CSS
Le schede sono un gruppo di radio: Tab entra nel gruppo, le frecce cambiano scheda e il pannello segue, senza JavaScript. I lettori di schermo le annunciano come «pulsante di opzione» e non come tablist, perché role=tab e aria-controls richiedono uno script che aggiorni aria-selected. Se la scheda porta a un'altra pagina usa tabsNav con aria-current="page".
Storybook
Apri le storie di Tabs

Esempio base

Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mostra il codice HTML
<div role="group" class="tabs tabs-border ita-tabs" aria-label="Schede">
  <label class="tab"><input type="radio" name="tabs-1" checked><span>Scheda 1</span></label>
  <div class="tab-content"><p>Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-1"><span>Scheda 2</span></label>
  <div class="tab-content"><p>Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-1"><span>Scheda 3</span></label>
  <div class="tab-content"><p>Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div>

Con icone

Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mostra il codice HTML
<div role="group" class="tabs tabs-border ita-tabs" aria-label="Schede">
  <label class="tab"><input type="radio" name="tabs-2" checked><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.7,2H7.5C6.7,2,6,2.7,6,3.5V4H5.5C4.7,4,4,4.7,4,5.5v15C4,21.3,4.7,22,5.5,22h11c0.8,0,1.5-0.7,1.5-1.5V20h0.5 c0.8,0,1.5-0.7,1.5-1.5V6.3L15.7,2z M16,3.7L18.3,6h-1.8C16.2,6,16,5.8,16,5.5V3.7z M17,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C5.2,21,5,20.8,5,20.5v-15C5,5.2,5.2,5,5.5,5H6v13.5C6,19.3,6.7,20,7.5,20H17V20.5z M18.5,19h-11C7.2,19,7,18.8,7,18.5v-15 C7,3.2,7.2,3,7.5,3H15v2.5C15,6.3,15.7,7,16.5,7H19v11.5C19,18.8,18.8,19,18.5,19z M9,9h8v1H9V9z M9,11h8v1H9V11z M9,13h4v1H9V13z" /></svg><span>Documenti</span></label>
  <div class="tab-content"><p>Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-2"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg><span>Messaggi</span></label>
  <div class="tab-content"><p>Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-2"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M3,9h18v3H3V9 z M21,17.5c0,0.3-0.2,0.5-0.5,0.5h-17C3.2,18,3,17.8,3,17.5V13h18V17.5z M3,8V6.5C3,6.2,3.2,6,3.5,6h17C20.8,6,21,6.2,21,6.5V8H3z M8,15H4v-1h4V15z" /></svg><span>Pagamenti</span></label>
  <div class="tab-content"><p>Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab tab-disabled"><input type="radio" name="tabs-2" disabled><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M21,18 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0H4c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V6C2.9,5.5,3.3,5.1,3.8,5C3.9,5,3.9,5,4,5 h5.6l1.7,1.7L11.6,7H20c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V18z M4,8h16v1H4V8z" /></svg><span>Archivio</span></label>
  <div class="tab-content"><p>Contenuto della scheda 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div>

Icona sopra l'etichetta

Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mostra il codice HTML
<div role="group" class="tabs tabs-border ita-tabs ita-tabs-fill ita-tabs-stacked" aria-label="Schede">
  <label class="tab"><input type="radio" name="tabs-3" checked><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.7,2H7.5C6.7,2,6,2.7,6,3.5V4H5.5C4.7,4,4,4.7,4,5.5v15C4,21.3,4.7,22,5.5,22h11c0.8,0,1.5-0.7,1.5-1.5V20h0.5 c0.8,0,1.5-0.7,1.5-1.5V6.3L15.7,2z M16,3.7L18.3,6h-1.8C16.2,6,16,5.8,16,5.5V3.7z M17,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C5.2,21,5,20.8,5,20.5v-15C5,5.2,5.2,5,5.5,5H6v13.5C6,19.3,6.7,20,7.5,20H17V20.5z M18.5,19h-11C7.2,19,7,18.8,7,18.5v-15 C7,3.2,7.2,3,7.5,3H15v2.5C15,6.3,15.7,7,16.5,7H19v11.5C19,18.8,18.8,19,18.5,19z M9,9h8v1H9V9z M9,11h8v1H9V11z M9,13h4v1H9V13z" /></svg><span>Documenti</span></label>
  <div class="tab-content"><p>Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-3"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg><span>Messaggi</span></label>
  <div class="tab-content"><p>Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-3"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M3,9h18v3H3V9 z M21,17.5c0,0.3-0.2,0.5-0.5,0.5h-17C3.2,18,3,17.8,3,17.5V13h18V17.5z M3,8V6.5C3,6.2,3.2,6,3.5,6h17C20.8,6,21,6.2,21,6.5V8H3z M8,15H4v-1h4V15z" /></svg><span>Pagamenti</span></label>
  <div class="tab-content"><p>Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab tab-disabled"><input type="radio" name="tabs-3" disabled><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M21,18 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0H4c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V6C2.9,5.5,3.3,5.1,3.8,5C3.9,5,3.9,5,4,5 h5.6l1.7,1.7L11.6,7H20c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V18z M4,8h16v1H4V8z" /></svg><span>Archivio</span></label>
  <div class="tab-content"><p>Contenuto della scheda 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div>

Solo icone

Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mostra il codice HTML
<div role="group" class="tabs tabs-border ita-tabs" aria-label="Schede">
  <label class="tab"><input type="radio" name="tabs-4" checked><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.7,2H7.5C6.7,2,6,2.7,6,3.5V4H5.5C4.7,4,4,4.7,4,5.5v15C4,21.3,4.7,22,5.5,22h11c0.8,0,1.5-0.7,1.5-1.5V20h0.5 c0.8,0,1.5-0.7,1.5-1.5V6.3L15.7,2z M16,3.7L18.3,6h-1.8C16.2,6,16,5.8,16,5.5V3.7z M17,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C5.2,21,5,20.8,5,20.5v-15C5,5.2,5.2,5,5.5,5H6v13.5C6,19.3,6.7,20,7.5,20H17V20.5z M18.5,19h-11C7.2,19,7,18.8,7,18.5v-15 C7,3.2,7.2,3,7.5,3H15v2.5C15,6.3,15.7,7,16.5,7H19v11.5C19,18.8,18.8,19,18.5,19z M9,9h8v1H9V9z M9,11h8v1H9V11z M9,13h4v1H9V13z" /></svg><span class="sr-only">Documenti</span></label>
  <div class="tab-content"><p>Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-4"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg><span class="sr-only">Messaggi</span></label>
  <div class="tab-content"><p>Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-4"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M3,9h18v3H3V9 z M21,17.5c0,0.3-0.2,0.5-0.5,0.5h-17C3.2,18,3,17.8,3,17.5V13h18V17.5z M3,8V6.5C3,6.2,3.2,6,3.5,6h17C20.8,6,21,6.2,21,6.5V8H3z M8,15H4v-1h4V15z" /></svg><span class="sr-only">Pagamenti</span></label>
  <div class="tab-content"><p>Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab tab-disabled"><input type="radio" name="tabs-4" disabled><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M21,18 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0H4c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V6C2.9,5.5,3.3,5.1,3.8,5C3.9,5,3.9,5,4,5 h5.6l1.7,1.7L11.6,7H20c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V18z M4,8h16v1H4V8z" /></svg><span class="sr-only">Archivio</span></label>
  <div class="tab-content"><p>Contenuto della scheda 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div>

A schede (card)

Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mostra il codice HTML
<div role="group" class="tabs tabs-lift ita-tabs ita-tabs-card" aria-label="Schede">
  <label class="tab"><input type="radio" name="tabs-5" checked><span>Scheda 1</span></label>
  <div class="tab-content"><p>Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-5"><span>Scheda 2</span></label>
  <div class="tab-content"><p>Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-5"><span>Scheda 3</span></label>
  <div class="tab-content"><p>Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div>

A tutta larghezza

Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mostra il codice HTML
<div role="group" class="tabs tabs-border ita-tabs ita-tabs-fill" aria-label="Schede">
  <label class="tab"><input type="radio" name="tabs-6" checked><span>Scheda 1</span></label>
  <div class="tab-content"><p>Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-6"><span>Scheda 2</span></label>
  <div class="tab-content"><p>Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-6"><span>Scheda 3</span></label>
  <div class="tab-content"><p>Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div>

Su sfondo primario

Il contenitore ha la classe it-surface-primary: i token si scambiano (base diventa primary, primary diventa primary-content) e il componente si adatta senza opzioni.

Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenuto della scheda 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mostra il codice HTML
<div class="it-surface-primary rounded-box p-6"><div role="group" class="tabs tabs-border ita-tabs" aria-label="Schede">
  <label class="tab"><input type="radio" name="tabs-7" checked><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.7,2H7.5C6.7,2,6,2.7,6,3.5V4H5.5C4.7,4,4,4.7,4,5.5v15C4,21.3,4.7,22,5.5,22h11c0.8,0,1.5-0.7,1.5-1.5V20h0.5 c0.8,0,1.5-0.7,1.5-1.5V6.3L15.7,2z M16,3.7L18.3,6h-1.8C16.2,6,16,5.8,16,5.5V3.7z M17,20.5c0,0.3-0.2,0.5-0.5,0.5h-11 C5.2,21,5,20.8,5,20.5v-15C5,5.2,5.2,5,5.5,5H6v13.5C6,19.3,6.7,20,7.5,20H17V20.5z M18.5,19h-11C7.2,19,7,18.8,7,18.5v-15 C7,3.2,7.2,3,7.5,3H15v2.5C15,6.3,15.7,7,16.5,7H19v11.5C19,18.8,18.8,19,18.5,19z M9,9h8v1H9V9z M9,11h8v1H9V11z M9,13h4v1H9V13z" /></svg><span>Documenti</span></label>
  <div class="tab-content"><p>Contenuto della scheda 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-7"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M20.2,6 l-7.1,7.2c-0.6,0.6-1.6,0.6-2.2,0L3.8,6H20.2z M3,17.3V6.6L8.3,12L3,17.3z M3.7,18L9,12.7l1.2,1.2c1,0.9,2.6,0.9,3.6,0l1.2-1.2l0,0 l5.3,5.3H3.7z M15.7,12L21,6.6v10.7L15.7,12z" /></svg><span>Messaggi</span></label>
  <div class="tab-content"><p>Contenuto della scheda 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab"><input type="radio" name="tabs-7"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.5,5h-17C2.7,5,2,5.7,2,6.5v11C2,18.3,2.7,19,3.5,19h17c0.8,0,1.5-0.7,1.5-1.5v-11C22,5.7,21.3,5,20.5,5z M3,9h18v3H3V9 z M21,17.5c0,0.3-0.2,0.5-0.5,0.5h-17C3.2,18,3,17.8,3,17.5V13h18V17.5z M3,8V6.5C3,6.2,3.2,6,3.5,6h17C20.8,6,21,6.2,21,6.5V8H3z M8,15H4v-1h4V15z" /></svg><span>Pagamenti</span></label>
  <div class="tab-content"><p>Contenuto della scheda 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <label class="tab tab-disabled"><input type="radio" name="tabs-7" disabled><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M21,18 c0.1,0.5-0.3,0.9-0.8,1c-0.1,0-0.1,0-0.2,0H4c-0.5,0.1-0.9-0.3-1-0.8c0-0.1,0-0.1,0-0.2V6C2.9,5.5,3.3,5.1,3.8,5C3.9,5,3.9,5,4,5 h5.6l1.7,1.7L11.6,7H20c0.5-0.1,0.9,0.3,1,0.8c0,0.1,0,0.1,0,0.2V18z M4,8h16v1H4V8z" /></svg><span>Archivio</span></label>
  <div class="tab-content"><p>Contenuto della scheda 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div></div>

Con JavaScript (opzionale)

La ricetta è solo CSS e funziona così com'è. Questi frammenti non sono inclusi nel pacchetto: mostrano come aggiungere il comportamento che richiede uno script, in JavaScript semplice o in React.

Schede ARIA vere (tablist)js

Se ti serve la semantica tablist: pulsanti role=tab, frecce sinistra/destra, Home/Fine e aria-selected aggiornato. Markup: div role=tablist con button role=tab aria-controls, seguiti dai pannelli role=tabpanel.

document.querySelectorAll("[role=tablist]").forEach((list) => {
  const tabs = [...list.querySelectorAll("[role=tab]")];
  const select = (tab) => {
    for (const t of tabs) {
      const on = t === tab;
      t.setAttribute("aria-selected", String(on));
      t.tabIndex = on ? 0 : -1;
      t.classList.toggle("tab-active", on);
      document.getElementById(t.getAttribute("aria-controls")).hidden = !on;
    }
    tab.focus();
  };
  list.addEventListener("click", (e) => { const t = e.target.closest("[role=tab]"); if (t) select(t); });
  list.addEventListener("keydown", (e) => {
    const i = tabs.indexOf(document.activeElement);
    const next = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 }[e.key];
    if (next === undefined) return;
    e.preventDefault();
    select(tabs[(next + tabs.length) % tabs.length]);
  });
});

Componente Reacttsx

import { useId, useRef, useState, type ReactNode } from "react";

export function Tabs({ items }: { items: { label: string; content: ReactNode }[] }) {
  const [current, setCurrent] = useState(0);
  const base = useId();
  const refs = useRef<(HTMLButtonElement | null)[]>([]);
  const go = (i: number) => { const n = (i + items.length) % items.length; setCurrent(n); refs.current[n]?.focus(); };
  return (
    <div>
      <div role="tablist" className="tabs tabs-border ita-tabs"
           onKeyDown={(e) => ({ ArrowRight: () => go(current + 1), ArrowLeft: () => go(current - 1) } as Record<string, () => void>)[e.key]?.()}>
        {items.map((it, i) => (
          <button key={i} ref={(el) => { refs.current[i] = el; }} role="tab" type="button" id={base + "-t" + i}
                  aria-selected={i === current} aria-controls={base + "-p" + i} tabIndex={i === current ? 0 : -1}
                  className={"tab" + (i === current ? " tab-active" : "")} onClick={() => setCurrent(i)}>
            {it.label}
          </button>
        ))}
      </div>
      {items.map((it, i) => (
        <div key={i} role="tabpanel" id={base + "-p" + i} aria-labelledby={base + "-t" + i} hidden={i !== current} className="border-t border-base-content/15 py-6">
          {it.content}
        </div>
      ))}
    </div>
  );
}