Controls i ràdios

Creeu caselles de verificació i ràdios coherents entre navegadors i dispositius amb el nostre component de comprovacions completament reescrits.

En aquesta pàgina

Aproximació

Les caselles de selecció i les ràdios predeterminades del navegador se substitueixen amb l'ajuda de .form-check, una sèrie de classes per a tots dos tipus d'entrada que milloren el disseny i el comportament dels seus elements HTML, que proporcionen una major personalització i consistència entre navegadors. Les caselles de selecció serveixen per seleccionar una o diverses opcions en una llista, mentre que les ràdios serveixen per seleccionar una opció entre moltes.

Estructuralment, les nostres <input>s i <label>s són elements germans en lloc d'un <input>dins d'un <label>. Això és una mica més detallat, ja que heu d'especificar idi forels atributs per relacionar <input>i <label>. Utilitzem el selector de germans ( ~) per a tots els nostres <input>estats, com :checkedo :disabled. Quan es combina amb la .form-check-labelclasse, podem estilitzar fàcilment el text de cada element en funció de l' <input>estat de '.

Les nostres comprovacions utilitzen icones d'arrencada personalitzades per indicar estats marcats o indeterminats.

xecs

Casella de selecció per defecte

Casilla de verificació marcada

html

<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>

Indeterminat

Les caselles de selecció poden utilitzar la :indeterminatepseudoclasse quan s'estableixen manualment mitjançant JavaScript (no hi ha cap atribut HTML disponible per especificar-lo).

Casilla de verificació indeterminada

html

<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>

Inhabilitat

Afegiu l' disabledatribut i les <label>s associades s'estilin automàticament perquè coincideixin amb un color més clar per ajudar a indicar l'estat de l'entrada.

S'ha desactivat la casella de selecció indeterminada

Casilla de selecció desactivada

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<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>

Ràdios

Ràdio per defecte

Ràdio marcada per defecte

html

<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>

Inhabilitat

Afegiu l' disabledatribut i les <label>s associades s'estilin automàticament perquè coincideixin amb un color més clar per ajudar a indicar l'estat de l'entrada.

Ràdio desactivada

Ràdio marcada desactivada

html

<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>

Interruptors

Un commutador té el marcatge d'una casella de selecció personalitzada, però utilitza la .form-switchclasse per representar un commutador. Penseu en fer servir role="switch"per transmetre amb més precisió la naturalesa del control a les tecnologies d'assistència que donen suport a aquesta funció. A les tecnologies d'assistència més antigues, simplement s'anunciarà com a casella de selecció habitual com a alternativa. Els interruptors també admeten l' disabledatribut.

Entrada de la casella de selecció del commutador per defecte

S'ha marcat l'entrada de la casella de selecció del commutador

S'ha desactivat l'entrada de la casella de selecció del commutador

html

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" 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" role="switch" 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" role="switch" 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" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Per defecte (apilat)

De manera predeterminada, qualsevol nombre de caselles de selecció i ràdios que siguin germans immediats s'apilaran verticalment i s'espaiaran adequadament amb .form-check.

Casella de selecció per defecte

Casilla de selecció desactivada

html

<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>

Ràdio per defecte

Segona ràdio predeterminada

Ràdio desactivada

html

<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>

En linia

Agrupeu les caselles de selecció o les ràdios a la mateixa fila horitzontal afegint .form-check-inline-les a qualsevol .form-check.

3 (discapacitat)

html

<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 (discapacitat)

html

<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>

Revés

Posa les teves caselles de selecció, ràdios i interruptors al costat oposat amb la .form-check-reverseclasse modificadora.

Casilla de verificació al revés

S'ha desactivat la casella de selecció inversa

Invertir l'entrada de la casella de selecció de l'interruptor

html

<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>

Sense etiquetes

Ometeu l'ajustament .form-checkde les caselles de verificació i les ràdios que no tenen text d'etiqueta. Recordeu que encara heu de proporcionar algun tipus de nom accessible per a les tecnologies d'assistència (per exemple, utilitzar aria-label). Consulteu la secció d' accessibilitat de la visió general dels formularis per obtenir més informació.

html

<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>

Botons de commutació

Creeu caselles de selecció i botons d'opció semblants a botons utilitzant .btnestils en lloc .form-check-labeldels <label>elements. Aquests botons de commutació es poden agrupar encara més en un grup de botons si cal.

Botons de commutació de la casella de selecció

Canvi únic

html

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

Comprovat

html

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

Inhabilitat

html

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

Visualment, aquests botons de commutació de caselles de selecció són idèntics als botons de commutació del connector de botons . No obstant això, les tecnologies d'assistència les transmeten de manera diferent: els lectors de pantalla anunciaran els canvis de caselles de verificació com a "marcat"/"no marcat" (ja que, malgrat la seva aparença, fonamentalment segueixen sent caselles de selecció), mentre que els botons de commutació del connector de botons seran anunciat com a "botó"/"botó premut". L'elecció entre aquests dos enfocaments dependrà del tipus de commutació que estigueu creant i de si la commutació tindrà sentit per als usuaris quan s'anunciï com a casella de selecció o com a botó real.

Botons de commutació de ràdio

Comprovat Ràdio Inhabilitat Ràdio

html

<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>

Estils esbossats

S'admeten diferents variants de .btn, com els diferents estils descrits.

Canvi únic
Comprovat
S'ha comprovat l'èxit de la ràdio Ràdio de perill

html

<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

Les variables

$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 10 3 3 6-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;