in English

Čekovi i radio

Kreirajte dosljedne potvrdne okvire i radio uređaje za više pretraživača i uređaja s našom potpuno prepisanom komponentom provjera.

Na ovoj stranici

Pristup

Podrazumevani okviri za potvrdu pretraživača i radio uređaji su zamenjeni uz pomoć .form-check, serije klasa za oba tipa unosa koji poboljšavaju izgled i ponašanje njihovih HTML elemenata, koji obezbeđuju veće prilagođavanje i konzistentnost među pretraživačima. Potvrdni okviri služe za odabir jedne ili više opcija na listi, dok radio uređaji služe za odabir jedne od više opcija.

Strukturno, naši <input>s i <label>s su srodni elementi za razliku od <input>unutar a <label>. Ovo je malo opširnije jer morate specificirati idi foratribute da biste povezali <input>i <label>. Koristimo bratski selektor ( ~) za sva naša <input>stanja, poput :checkedili :disabled. Kada se kombinuje sa .form-check-labelklasom, možemo lako da stilizujemo tekst za svaku stavku na osnovu stanja <input>'.

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

Čekovi

Podrazumevano polje za potvrdu

Označeno polje za potvrdu

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

Polje za potvrdu mogu koristiti :indeterminatepseudo klasu kada se ručno podese putem JavaScripta (ne postoji dostupan HTML atribut za njegovo navođenje).

Neodređeno polje za potvrdu

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 se podudaraju sa svjetlijom bojom kako bi se naznačilo stanje ulaza.

Onemogućeno neodređeno polje za potvrdu

Polje za potvrdu Onemogućeno

Označeno polje za potvrdu onemogućeno

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

Zadani radio

Zadano označen 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 se podudaraju sa svjetlijom bojom kako bi se naznačilo stanje ulaza.

Disabled radio

Onemogućen 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 oznaku prilagođenog okvira za potvrdu, ali koristi .form-switchklasu za prikazivanje prekidača. Razmislite o korištenju role="switch"za preciznije prenošenje prirode kontrole pomoćnim tehnologijama koje podržavaju ovu ulogu. U starijim pomoćnim tehnologijama, jednostavno će biti najavljeno kao redovni checkbox kao rezervni. Prekidači također podržavaju disabledatribut.

Unos u polju za potvrdu zadanog prekidača

Provjeren unos u polju za potvrdu prekidača

Onemogućen unos u polju za potvrdu prekidača

Onemogućen unos u polju za potvrdu 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 (naslagano)

Prema zadanim postavkama, bilo koji broj okvira za potvrdu i radija koji su neposredni brat ili sestra bit će okomito naslagani i na odgovarajući način razmaknuti sa .form-check.

Podrazumevano polje za potvrdu

Polje za potvrdu Onemogućeno

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

Disabled 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 stanice u istom horizontalnom redu dodavanjem .form-check-inlineu bilo koji .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 uređaje i prekidače na suprotnu stranu sa .form-check-reverseklasom modifikatora.

Obrnuti potvrdni okvir

Obrnuti potvrdni okvir je onemogućen

Ulaz u polje za potvrdu prekidača unazad

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 uređaje koji nemaju tekst oznake. Ne zaboravite da i dalje navedete neki oblik pristupačnog imena za pomoćne tehnologije (na primjer, korištenje aria-label). Za detalje pogledajte odjeljak o pristupačnosti pregleda obrazaca .

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>

Dugmad za uključivanje/isključivanje

Kreirajte potvrdne okvire nalik dugmadima i radio dugmad koristeći .btnstilove, a ne .form-check-labelna <label>elementima. Ovi prekidači se mogu dalje grupirati u grupu dugmadi ako je potrebno.

Dugmad za potvrdni okvir

Pojedinačni 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>

Vizuelno, ova dugmad za izbor u polju za potvrdu su identična dugmadima za prebacivanje dodatka dugmeta . Međutim, pomoćne tehnologije ih prenose drugačije: preklopne okvire za potvrdu će čitači ekrana najaviti kao „potvrđene“/„nije označene“ (budući da su, uprkos svom izgledu, oni u osnovi i dalje potvrdni okviri), dok će gumbi za prebacivanje dodatka gumba biti najavljeno kao "dugme"/"dugme pritisnuto". Izbor između ova dva pristupa ovisit će o vrsti prekidača koji kreirate i da li će prekidač imati smisla za korisnike kada je najavljen kao okvir za potvrdu ili kao stvarno dugme.

Dugmad za prebacivanje radija

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.

Pojedinačni prekidač
Provjereno
Radio provjeren uspjeh Danger radio

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;