Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Chɛk ɛn redio dɛn

Krio kɔnsistɛns krɔs-brawza ɛn krɔs-divays chɛkbɔks ɛn redio wit wi kɔmplit chɛk kɔmpɔnɛnt we dɛn dɔn rayt bak ɔlsay.

Na dis pej

Mit

Brawza difɔlt chɛkbɔks ɛn redio dɛn de riples wit di ɛp fɔ .form-check, wan siriɔs klas fɔ ɔl tu di kayn input dɛn we de mek di layout ɛn bihayvya fɔ dɛn HTML ɛlimɛnt dɛn bɛtɛ, we de gi big kɔstɔmayshɔn ɛn krɔs brawza kɔnsistɛns. Chɛkbɔks dɛn na fɔ pik wan ɔ sɔm tin dɛn we de na wan list, ɛn redio dɛn na fɔ pik wan tin dɛn frɔm bɔku pan dɛn.

Struktrɔl wan, wi <input>s ɛn <label>s na brɔda ɛn sista ɛlimɛnt dɛn as opɔz to wan <input>insay wan <label>. Dis na smɔl mɔ verbose as yu fɔ spɛsifa idɛn foratribyut dɛn fɔ rilayt di <input>ɛn <label>. Wi de yuz di sibling selector ( ~) fɔ ɔl wi <input>stet dɛn, lɛk :checkedɔ :disabled. We wi jɔyn wit di .form-check-labelklas, wi kin ebul fɔ stayl di tɛks fɔ ɛni tin izi wan bay di <input>'s stet.

Wi chɛk dɛn de yuz kɔstɔm Bootstrap aykɔn dɛn fɔ sho di stet dɛn we dɛn dɔn chɛk ɔ we dɛn nɔ dɔn disayd.

Chɛk dɛn

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

I nɔ de disayd fɔ du sɔntin

Chɛkbɔks dɛn kin yuz di :indeterminatepseudo klas we dɛn sɛt wit dɛn an bay JavaSkript (no HTML atribyut nɔ de fɔ spɛsifa am).

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

Disebul

Ad di disabledatribyut ɛn di <label>s dɛn we gɛt fɔ du wit am de ɔtomɛtik stayl fɔ mach wit layt kɔlɔ fɔ ɛp fɔ sho di input in stet.

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

Redio dɛn

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

Disebul

Ad di disabledatribyut ɛn di <label>s dɛn we gɛt fɔ du wit am de ɔtomɛtik stayl fɔ mach wit layt kɔlɔ fɔ ɛp fɔ sho di input in stet.

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

Switch dɛn

Swich gɛt di mak fɔ wan kɔstɔm chɛkbɔks bɔt i de yuz di .form-switchklas fɔ rɛnd wan tɔgl switch. Tink bɔt fɔ yuz role="switch"fɔ mek dɛn no mɔ kɔrɛkt wan di kayn kɔntrol we de fɔ ɛp tɛknɔlɔji dɛn we de sɔpɔt dis wok. Insay ol ɛp tɛknɔlɔji dɛn, dɛn go jɔs anɔys am as rɛgyula chɛkbɔks as fɔl bak. Switch dɛn de sɔpɔt di disabledatribyut bak.

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

Difɔlt (we dɛn dɔn stak) .

Bay difɔlt, ɛni nɔmba fɔ chɛkbɔks ɛn redio dɛn we na brɔda ɛn sista dɛn we de nia dɛnsɛf go de vertikal wan ɛn dɛn go put dɛn spɛshal say wit .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>

Inlayn

Grup chɛkbɔks ɔ redio dɛn na di sem ɔrizɔntal row bay we yu ad .form-check-inlineto ɛni wan pan dɛn .form-check.

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

Wi nɔ gɛt lɛbl dɛn

Nɔ put di rap .form-checkfɔ chɛk bɔks ɛn redio dɛn we nɔ gɛt lɛbl tɛks. Mɛmba fɔ stil gi sɔm kayn nem we pɔsin kin ebul fɔ yuz fɔ ɛp tɛknɔlɔji dɛn (fɔ ɛgzampul, yuz aria-label). Si di fɔm dɛn ɔvaviu aksesibiliti sɛkshɔn fɔ di ditel dɛn.

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

Tɔgl di bɔtin dɛn

Krio chɛkbɔks dɛn we tan lɛk bɔtin ɛn redio bɔtin dɛn bay we yu yuz .btnstayl dɛn pas .form-check-labelfɔ yuz di <label>ɛlimɛnt dɛn. Yu kin grup dɛn tɔgl bɔtin dɛn ya mɔ na wan bɔtin grup if nid de.

Di bɔtin dɛn we de chenj di chɛk bɔks

<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>
We yu si am, dɛn chɛkbɔks tɔgl bɔtin dɛn ya na di sem wit di bɔtin plɔgin tɔgl bɔtin dɛn . Bɔt, dɛn kin gi dɛn difrɛn we bay ɛp tɛknɔlɔji dɛn: di chɛkbɔks tɔgl dɛn go bi di wan dɛn we de rid di skrin go anɔys dɛn as “chɛk”/“nɔ chɛk” (bikɔs, pan ɔl we dɛn tan lɛk, dɛn stil na chɛkbɔks dɛn fɔs), we di bɔtin plɔgin tɔgl bɔtin dɛn go bi anɔys as “bɔtin”/“bɔtin we dɛn prɛs”. Di we aw yu go pik bitwin dɛn tu we ya go dipen pan di kayn tɔgl we yu de mek, ɛn if di tɔgl go mek sɛns to di wan dɛn we de yuz am we dɛn anɔys am as chɛkbɔks ɔ as rial bɔtin.

Di bɔtin dɛn we de chenj di redio

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

Stayl dɛn we dɛn dɔn sho

Difrɛn difrɛn we dɛn fɔ .btn, lɛk di difrɛn stayl dɛn we dɛn dɔn sho, dɛn de sɔpɔt.



<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 we bin de

Di tin dɛn we kin chenj

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