Čekovi i radio

Stvorite dosljedne potvrdne okvire i radije za više preglednika i uređaja s našom potpuno prepisanom komponentom za provjere.

Na ovoj stranici

Pristup

Zadani potvrdni okviri i radio stanice preglednika zamijenjeni su uz pomoć .form-check, niza klasa za obje vrste unosa koji poboljšavaju izgled i ponašanje njihovih HTML elemenata, koji pružaju veću prilagodbu i dosljednost među preglednicima. Potvrdni okviri služe za odabir jedne ili više opcija na popisu, dok radiji služe za odabir jedne opcije od više njih.

Strukturno, naši <input>s i <label>s su srodni elementi za razliku od a <input>unutar a <label>. Ovo je nešto opširnije jer morate navesti atribute idi forza povezivanje <input>i <label>. Koristimo selektor srodnog ( ~) za sva naša <input>stanja, poput :checkedili :disabled. U kombinaciji s .form-check-labelklasom, možemo jednostavno stilizirati tekst za svaku stavku na temelju stanja <input>'s.

Naše provjere koriste prilagođene Bootstrap ikone za označavanje provjerenih ili neodređenih stanja.

Čekovi

Zadani potvrdni okvir

Označen potvrdni okvir

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>

Neodređeno

Potvrdni okviri mogu koristiti :indeterminatepseudo klasu kada se ručno postavljaju putem JavaScripta (ne postoji dostupan HTML atribut za njegovo određivanje).

Neodređeni potvrdni okvir

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>

Onemogućeno

Dodajte disabledatribut i pridruženi <label>s automatski se stiliziraju tako da odgovaraju svjetlijoj boji kako bi se lakše označilo stanje unosa.

Onemogućen neodređeni potvrdni okvir

Onemogućen potvrdni okvir

Potvrdni okvir onemogućen

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>

Radio aparati

Zadani radio

Zadani označeni radio

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>

Onemogućeno

Dodajte disabledatribut i pridruženi <label>s automatski se stiliziraju tako da odgovaraju svjetlijoj boji kako bi se lakše označilo stanje unosa.

Onesposobljeni radio

Onesposobljen provjereni radio

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>

Prekidači

Prekidač ima oznake prilagođenog potvrdnog okvira, ali koristi .form-switchklasu za prikaz preklopnog prekidača. Razmislite o korištenju role="switch"za točniji prijenos prirode kontrole na pomoćne tehnologije koje podržavaju ovu ulogu. U starijim pomoćnim tehnologijama, jednostavno će biti najavljen kao obični potvrdni okvir kao zamjena. Prekidači također podržavaju disabledatribut.

Zadani unos potvrdnog okvira prekidača

Označeni unos potvrdnog okvira prekidača

Onemogućen unos potvrdnog okvira prekidača

Onemogućen unos potvrdnog okvira označenog prekidača

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>

Zadano (složeno)

Prema zadanim postavkama, bilo koji broj potvrdnih okvira i radija koji su neposredni srodnici bit će okomito naslagani i odgovarajuće razmaknuti s .form-check.

Zadani potvrdni okvir

Onemogućen potvrdni okvir

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>

Zadani radio

Drugi zadani radio

Onesposobljeni radio

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>

U redu

Grupirajte potvrdne okvire ili radio u istom vodoravnom retku dodavanjem .form-check-inlinebilo kojem .form-check.

3 (onemogućeno)

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 (onemogućeno)

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>

Obrnuto

Stavite svoje potvrdne okvire, radio i prekidače na suprotnu stranu s .form-check-reverseklasom modifikatora.

Obrnuti potvrdni okvir

Onemogućen obrnuti potvrdni okvir

Unos potvrdnog okvira za promjenu smjera

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>

Bez etiketa

Izostavite prelamanje .form-checkza potvrdne okvire i radio koji nemaju tekst oznake. Ne zaboravite navesti neki oblik pristupačnog naziva za pomoćne tehnologije (na primjer, korištenje aria-label). Pogledajte odjeljak pristupačnosti pregleda obrazaca za detalje.

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>

Gumbi za prebacivanje

Stvorite potvrdne okvire i radio gumbe poput gumba koristeći .btnstilove, a ne .form-check-labelna <label>elementima. Ti se gumbi za prebacivanje mogu dodatno grupirati u grupu gumba ako je potrebno.

Gumbi za prebacivanje potvrdnog okvira

Jednostruki prekidač

html

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

Provjereno

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>

Onemogućeno

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>

Vizualno, ovi gumbi za uključivanje potvrdnih okvira identični su gumbima za uključivanje dodataka gumba . Međutim, pomoćne tehnologije ih prenose na drugačiji način: čitači zaslona najavit će prekidače potvrdnih okvira kao "potvrđene"/"nije označene" (budući da su, unatoč svom izgledu, u osnovi još uvijek potvrdni okviri), dok će gumbi za uključivanje dodataka gumba biti najavljen kao “gumb”/“gumb pritisnut”. Izbor između ova dva pristupa ovisit će o vrsti preklopnika koji stvarate i hoće li preklopnik imati smisla za korisnike kada se najavi kao potvrdni okvir ili kao stvarni gumb.

Radio prekidači

Provjereno Radio Onemogućeno Radio

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>

Ocrtani stilovi

Podržane su različite varijante .btn, kao što su različiti navedeni stilovi.

Jednostruki prekidač
Provjereno
Provjereni uspjeh radio Radio opasnosti

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

Varijable

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