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

Difɔlt chɛkbɔks

Chɛk bɔks we dɛn chɛk

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>

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

Chɛkbɔks we nɔ de disayd fɔ du sɔntin

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>

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.

Disabled indeterminate chɛkbɔks

Disabled chɛkbɔks

Disabled chɛk bɔks we dɛn chɛk

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>

Redio dɛn

Difɔlt redio we dɛn mek

Difɔlt chɛk redio

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>

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.

Redio we nɔ ebul fɔ wok

Disabled chɛk redio

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>

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.

Difɔlt switch chɛkbɔks input

Chek switch chɛkbɔks input

Disabled switch chɛkbɔks input

Disabled chɛk switch chɛkbɔks input

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>

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.

Difɔlt chɛkbɔks

Disabled chɛkbɔks

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>

Difɔlt redio we dɛn mek

Sɛkɔn difɔlt redio

Redio we nɔ ebul fɔ wok

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>

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.

1. Di wan dɛn we de

2. Di wan dɛn we de

3 (di wan dɛn we nɔ ebul fɔ waka) .

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>

1. Di wan dɛn we de

2. Di wan dɛn we de

3 (di wan dɛn we nɔ ebul fɔ waka) .

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>

Chenj

Put yu chɛkbɔks dɛn, redio dɛn, ɛn swit dɛn na di ɔda say wit di .form-check-reversemodifya klas.

Rivas chɛkbɔks

Disabled rivas chɛkbɔks

Rivas switch chɛkbɔks input

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>

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.

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>

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

Single toggle we yu de yuz

html

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

Dɛn dɔn chɛk am

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>

Disebul

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>

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

Dɛn dɔn chɛk am Redio Disebul Redio

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>

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.

Single toggle we yu de yuz
Dɛn dɔn chɛk am
Chek sakses redio Redio we de mek denja

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