Componente

Radio

Pulsanti di opzione nativi con daisyUI radio nel colore primario, in un fieldset con legenda: lo stesso name li rende esclusivi e le frecce si muovono nel gruppo.

Riferimento: <it-radio>, <it-radio-group>
Classi: ita-radioita-radio-smita-radio-lgita-choiceita-choice-textita-choice-hintita-choice-groupita-legendita-choice-listita-choice-list-inline
Basato su (daisyUI): radiofieldsetvalidator
Solo CSS: Esclusività e navigazione con le frecce sono del browser. Per un gruppo obbligatorio basta required su un elemento.
Storybook: Apri le storie di Radio

Esempio base

Modalità di ritiro

Presso lo sportello Spedizione a domicilio Download dal fascicolo online

Mostra il codice HTML

<fieldset class="ita-choice-group">
  <legend class="ita-legend">Modalità di ritiro</legend>
  <div class="ita-choice-list">
    <label for="radio-27" class="ita-choice"><input type="radio" id="radio-27" class="ita-radio" name="radio-1" value="sportello" checked><span class="ita-choice-text"><span>Presso lo sportello</span></span></label>
    <label for="radio-28" class="ita-choice"><input type="radio" id="radio-28" class="ita-radio" name="radio-1" value="domicilio"><span class="ita-choice-text"><span>Spedizione a domicilio</span></span></label>
    <label for="radio-29" class="ita-choice"><input type="radio" id="radio-29" class="ita-radio" name="radio-1" value="online"><span class="ita-choice-text"><span>Download dal fascicolo online</span></span></label>
  </div>
</fieldset>

In linea

Hai già un'utenza?

Sì No

Mostra il codice HTML

<fieldset class="ita-choice-group">
  <legend class="ita-legend">Hai già un'utenza?</legend>
  <div class="ita-choice-list ita-choice-list-inline">
    <label for="radio-31" class="ita-choice"><input type="radio" id="radio-31" class="ita-radio" name="radio-2" value="si"><span class="ita-choice-text"><span>Sì</span></span></label>
    <label for="radio-32" class="ita-choice"><input type="radio" id="radio-32" class="ita-radio" name="radio-2" value="no" checked><span class="ita-choice-text"><span>No</span></span></label>
  </div>
</fieldset>

Con descrizione

Tipo di pagamento

Il costo del servizio è di 16,00 €.

pagoPACarta, conto corrente o app della tua banca. BonificoAccredito entro 3 giorni lavorativi. Allo sportelloSolo con bancomat.

Mostra il codice HTML

<fieldset class="ita-choice-group" aria-describedby="radio-group-33-hint">
  <legend class="ita-legend">Tipo di pagamento</legend>
  <p id="radio-group-33-hint" class="ita-hint">Il costo del servizio è di 16,00 €.</p>
  <div class="ita-choice-list">
    <label for="radio-34" class="ita-choice"><input type="radio" id="radio-34" class="ita-radio" name="radio-3" value="pagopa" checked aria-describedby="radio-34-hint"><span class="ita-choice-text"><span>pagoPA</span><span id="radio-34-hint" class="ita-choice-hint">Carta, conto corrente o app della tua banca.</span></span></label>
    <label for="radio-35" class="ita-choice"><input type="radio" id="radio-35" class="ita-radio" name="radio-3" value="bonifico" aria-describedby="radio-35-hint"><span class="ita-choice-text"><span>Bonifico</span><span id="radio-35-hint" class="ita-choice-hint">Accredito entro 3 giorni lavorativi.</span></span></label>
    <label for="radio-36" class="ita-choice"><input type="radio" id="radio-36" class="ita-radio" name="radio-3" value="sportello" disabled aria-describedby="radio-36-hint"><span class="ita-choice-text"><span>Allo sportello</span><span id="radio-36-hint" class="ita-choice-hint">Solo con bancomat.</span></span></label>
  </div>
</fieldset>

Gruppo disabilitato

Fascia oraria

Mattina Pomeriggio

Mostra il codice HTML

<fieldset class="ita-choice-group">
  <legend class="ita-legend">Fascia oraria</legend>
  <div class="ita-choice-list">
    <label for="radio-38" class="ita-choice"><input type="radio" id="radio-38" class="ita-radio" name="radio-4" value="m" checked disabled><span class="ita-choice-text"><span>Mattina</span></span></label>
    <label for="radio-39" class="ita-choice"><input type="radio" id="radio-39" class="ita-radio" name="radio-4" value="p" disabled><span class="ita-choice-text"><span>Pomeriggio</span></span></label>
  </div>
</fieldset>

Dimensioni

Piccolo Standard Grande

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-6">
  <label for="radio-40" class="ita-choice"><input type="radio" id="radio-40" class="ita-radio ita-radio-sm" name="dim" checked><span class="ita-choice-text"><span>Piccolo</span></span></label>
  <label for="radio-41" class="ita-choice"><input type="radio" id="radio-41" class="ita-radio" name="dim"><span class="ita-choice-text"><span>Standard</span></span></label>
  <label for="radio-42" class="ita-choice"><input type="radio" id="radio-42" class="ita-radio ita-radio-lg" name="dim"><span class="ita-choice-text"><span>Grande</span></span></label>
</div>

Validazione

Sei residente nel comune?

Sì No

Scegli una delle due risposte

Mostra il codice HTML

<fieldset class="ita-choice-group" aria-describedby="radio-group-43-feedback">
  <legend class="ita-legend">Sei residente nel comune? <span class="ita-required" aria-hidden="true">*</span></legend>
  <div class="ita-choice-list ita-choice-list-inline">
    <label for="radio-44" class="ita-choice"><input type="radio" id="radio-44" class="ita-radio" name="radio-5" value="si" required><span class="ita-choice-text"><span>Sì</span></span></label>
    <label for="radio-45" class="ita-choice"><input type="radio" id="radio-45" class="ita-radio" name="radio-5" value="no"><span class="ita-choice-text"><span>No</span></span></label>
  </div>
  <p id="radio-group-43-feedback" class="ita-feedback ita-feedback-invalid"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,18.3h1.2v-1.8h-1.2V18.3z M22,7.9v8.3L16.1,22H7.9L2,16.2V7.9L7.9,2h8.2L22,7.9z M21,8.3L15.7,3H8.3L3,8.3v7.5L8.3,21h7.4l5.3-5.2V8.3z" /></svg><span>Scegli una delle due risposte</span></p>
</fieldset>