in English

Controlli e radio

Crea caselle di controllo e radio coerenti cross-browser e cross-device con il nostro componente di controlli completamente riscritto.

Su questa pagina

Approccio

Le caselle di controllo e le radio predefinite del browser vengono sostituite con l'aiuto di .form-check, una serie di classi per entrambi i tipi di input che migliora il layout e il comportamento dei loro elementi HTML, che forniscono una maggiore personalizzazione e coerenza tra browser diversi. Le caselle di controllo servono per selezionare una o più opzioni in un elenco, mentre le radio servono per selezionare un'opzione tra molte.

Strutturalmente, i nostri <input>s e <label>s sono elementi fratelli al contrario di un <input>all'interno di un <label>. Questo è leggermente più dettagliato in quanto è necessario specificare ide forattributi per mettere in relazione <input>e <label>. Usiamo il selettore di pari livello ( ~) per tutti i nostri <input>stati, come :checkedo :disabled. Se combinato con la .form-check-labelclasse, possiamo facilmente definire lo stile del testo per ogni elemento in base allo <input>stato di '.

I nostri controlli utilizzano icone Bootstrap personalizzate per indicare stati controllati o indeterminati.

Controlli

Casella di controllo predefinita

Casella di controllo selezionata

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Indeterminato

Le caselle di controllo possono utilizzare la :indeterminatepseudo classe se impostate manualmente tramite JavaScript (non è disponibile alcun attributo HTML per specificarlo).

Casella di controllo indeterminata

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Indeterminate checkbox
  </label>
</div>

Disabilitato

Aggiungi l' disabledattributo e le <label>s associate vengono automaticamente abbinate a un colore più chiaro per aiutare a indicare lo stato dell'input.

Casella di controllo disabilitata

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

radio

Radio predefinita

Radio selezionata predefinita

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

Disabilitato

Aggiungi l' disabledattributo e le <label>s associate vengono automaticamente abbinate a un colore più chiaro per aiutare a indicare lo stato dell'input.

Radio disabilitata

Radio controllata disabilitata

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

Interruttori

Un interruttore ha il markup di una casella di controllo personalizzata ma usa la .form-switchclasse per eseguire il rendering di un interruttore a levetta. Gli interruttori supportano anche l' disabledattributo.

Input della casella di controllo dell'interruttore predefinito

Selezionato l'ingresso della casella di controllo dell'interruttore

Ingresso casella di controllo interruttore disabilitato

Input della casella di controllo dell'interruttore selezionato disabilitato

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Predefinito (impilato)

Per impostazione predefinita, qualsiasi numero di caselle di controllo e radio che sono fratelli immediati sarà impilato verticalmente e opportunamente distanziato con .form-check.

Casella di controllo predefinita

Casella di controllo disabilitata

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Radio predefinita

Seconda radio predefinita

Radio disabilitata

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

In linea

Raggruppa caselle di controllo o radio sulla stessa riga orizzontale aggiungendo .form-check-inlinea qualsiasi .form-check.

3 (disabilitato)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (disabilitato)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Senza etichette

Ometti il wrapping .form-checkper le caselle di controllo e le radio che non hanno il testo dell'etichetta. Ricordarsi di fornire comunque una qualche forma di nome accessibile per le tecnologie assistive (ad esempio, utilizzando aria-label). Per i dettagli, vedere la sezione relativa all'accessibilità della panoramica dei moduli .

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

Attiva/disattiva i pulsanti

Crea caselle di controllo e pulsanti di opzione simili a pulsanti utilizzando .btngli stili anziché .form-check-labelsugli <label>elementi. Questi pulsanti di commutazione possono essere ulteriormente raggruppati in un gruppo di pulsanti, se necessario.

Pulsanti di attivazione/disattivazione della casella di controllo

Singolo interruttore

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

Controllato

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

Disabilitato

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Visivamente, questi pulsanti di attivazione/disattivazione delle caselle di controllo sono identici ai pulsanti di attivazione/disattivazione del plug-in dei pulsanti . Tuttavia, sono veicolati in modo diverso dalle tecnologie assistive: le opzioni di attivazione/disattivazione delle checkbox saranno annunciate dagli screen reader come "selezionate"/"non selezionate" (poiché, nonostante il loro aspetto, sono fondamentalmente ancora caselle di controllo), mentre i pulsanti di attivazione/disattivazione del plug-in dei pulsanti saranno annunciato come “pulsante”/“pulsante premuto”. La scelta tra questi due approcci dipenderà dal tipo di interruttore che stai creando e dal fatto che l'interruttore abbia o meno senso per gli utenti quando viene annunciato come casella di controllo o come pulsante effettivo.

Pulsanti di commutazione radio

Controllato Radio Disabilitato Radio

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

Stili delineati

Sono supportate diverse varianti di .btn, ad esempio nei vari stili delineati.

Singolo interruttore
Controllato
Radio di successo controllata Pericolo radio

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

Sass

Variabili

$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 1px solid rgba($black, .25);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;