Чекови и радио

Креирајте конзистентне оквире за потврду за више прегледача и уређаја и радио уређаје помоћу наше потпуно преписане компоненте за проверу.

На овој страници

Приступ

Подразумевани оквири за потврду претраживача и радио уређаји су замењени уз помоћ .form-check, серије класа за оба типа уноса који побољшавају изглед и понашање њихових ХТМЛ елемената, који обезбеђују веће прилагођавање и конзистентност међу претраживачима. Поља за потврду служе за бирање једне или више опција на листи, док су радио уређаји за избор једне опције из више.

Структурно, наши <input>с и <label>с су сродни елементи за разлику од <input>унутар а <label>. Ово је мало опширније јер морате навести idи forатрибуте да бисте повезали <input>и <label>. Користимо братски селектор ( ~) за сва наша <input>стања, попут :checkedили :disabled. Када се комбинује са .form-check-labelкласом, можемо лако да стилизујемо текст за сваку ставку на основу стања <input>'.

Наше провере користе прилагођене Боотстрап иконе за означавање проверених или неодређених стања.

Чекови

Подразумевано поље за потврду

Означено поље за потврду

хтмл

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

Неодређено

Поља за потврду могу да користе :indeterminateпсеудо класу када се ручно подесе преко ЈаваСцрипт-а (не постоји доступан ХТМЛ атрибут за његово навођење).

Неодређено поље за потврду

хтмл

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

Онемогућено

Додајте disabledатрибут и повезани <label>с се аутоматски стилизују тако да се подударају са светлијом бојом како би се указало на стање уноса.

Неодређено поље за потврду је онемогућено

Поље за потврду Онемогућено

Означено поље за потврду је онемогућено

хтмл

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

Радио

Подразумевани радио

Подразумевано проверен радио

хтмл

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

Онемогућено

Дисаблед радио

Онемогућен проверени радио

хтмл

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

Прекидачи

Прекидач има ознаку прилагођеног поља за потврду, али користи .form-switchкласу за приказивање прекидача. Размислите о коришћењу role="switch"да бисте прецизније пренели природу контроле помоћним технологијама које подржавају ову улогу. У старијим помоћним технологијама, то ће једноставно бити најављено као регуларно поље за потврду као резервни. Прекидачи такође подржавају disabledатрибут.

Унос у пољу за потврду подразумеваног прекидача

Проверен унос у пољу за потврду прекидача

Онемогућен унос у пољу за потврду прекидача

Онемогућен унос у пољу за потврду са означеним прекидачем

хтмл

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

Подразумевано (наслагано)

Подразумевано, било који број поља за потврду и радија који су непосредни брат или сестра биће вертикално наслагани и на одговарајући начин распоређени са .form-check.

Подразумевано поље за потврду

Поље за потврду Онемогућено

хтмл

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

Подразумевани радио

Други подразумевани радио

Дисаблед радио

хтмл

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

У реду

Групирајте поља за потврду или радио станице у истом хоризонталном реду додавањем .form-check-inlineу било који .form-check.

3 (онемогућено)

хтмл

<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 (онемогућено)

хтмл

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

Реверсе

Ставите своје потврдне оквире, радио уређаје и прекидаче на супротну страну са .form-check-reverseкласом модификатора.

Обрнуто поље за потврду

Обрнуто поље за потврду је онемогућено

Унос у пољу за потврду обрнутог прекидача

хтмл

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

Без етикета

Изоставите преламање .form-checkза поља за потврду и радио уређаје који немају текст ознаке. Не заборавите да и даље наведете неки облик приступачног имена за помоћне технологије (на пример, коришћење aria-label). Погледајте одељак о приступачности прегледа образаца за детаље.

хтмл

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

Дугмад за пребацивање

Креирајте поља за потврду и радио дугмад попут дугмади користећи .btnстилове уместо .form-check-labelна <label>елементима. Ова дугмад за пребацивање могу се даље груписати у групу дугмади ако је потребно.

Дугмад за избор у пољу за потврду

Појединачни прекидач

хтмл

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

Проверено

хтмл

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

Онемогућено

хтмл

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

Визуелно, ова дугмад за избор у пољу за потврду су идентична дугмадима за укључивање/искључивање додатака . Међутим, помоћне технологије их преносе на другачији начин: читачи екрана ће означити преклопнике у пољу за потврду као „потврђено“/„није означено“ (пошто су, упркос свом изгледу, они у основи и даље поља за потврду), док ће дугмад за пребацивање додатка дугмета бити најављено као „дугме”/„дугме притиснуто”. Избор између ова два приступа зависиће од типа прекидача који креирате и да ли ће прекидач имати смисла за кориснике када се објави као поље за потврду или као стварно дугме.

Дугмад за пребацивање радија

Проверено Радио Онемогућено Радио

хтмл

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

Оцртани стилови

Подржане су различите варијанте .btn, као што су различити наведени стилови.

Појединачни прекидач
Проверено
Радио проверен успех Дангер радио

хтмл

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

Сасс

Променљиве

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