in English

Sekit ja radiot

Luo johdonmukaisia selainten ja laitteiden välisiä valintaruutuja ja radioita täysin uudelleen kirjoitetulla tarkistuskomponentillamme.

Tällä sivulla

Lähestyä

Selaimen oletusvalintaruudut ja radiot korvataan käyttämällä .form-checkluokkaa molemmille syöttötyypeille, mikä parantaa niiden HTML-elementtien asettelua ja käyttäytymistä, mikä tarjoaa paremman mukauttamisen ja selainyhdenmukaisuuden. Valintaruuduilla voit valita yhden tai useamman vaihtoehdon luettelosta, kun taas radiot ovat yhden vaihtoehdon valitsemiseen monista.

Rakenteellisesti <input>s ja <label>s ovat sisaruselementtejä toisin kuin <input>sisällä a <label>. Tämä on hieman monisanaisempi, koska sinun on määritettävä idja forattribuutit suhteuttamaan <input>ja <label>. Käytämme sisarusvalitsinta ( ~) kaikille <input>osavaltioillemme, kuten :checkedtai :disabled. Yhdistettynä .form-check-labelluokkaan voimme helposti muotoilla kunkin kohteen tekstin <input>tilan perusteella.

Sekkeissämme käytetään mukautettuja Bootstrap-kuvakkeita, jotka osoittavat valitut tai määrittelemättömät tilat.

Tarkistukset

Oletusvalintaruutu

Valittu valintaruutu

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>

Epämääräinen

Valintaruudut voivat käyttää :indeterminatepseudoluokkaa, kun se on asetettu manuaalisesti JavaScriptin avulla (sen määrittämiseen ei ole käytettävissä HTML-attribuuttia).

Epämääräinen valintaruutu

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>

Liikuntarajoitteinen

Lisää disabledattribuutti ja siihen liittyvät <label>s:t tyylitetään automaattisesti vastaamaan vaaleampaa väriä syötteen tilan osoittamiseksi.

Poistettu epämääräinen valintaruutu

Pois käytöstä -valintaruutu

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>

Radiot

Oletusradio

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

Liikuntarajoitteinen

Lisää disabledattribuutti ja siihen liittyvät <label>s:t tyylitetään automaattisesti vastaamaan vaaleampaa väriä syötteen tilan osoittamiseksi.

Radio pois käytöstä

Radio poistettu käytöstä

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>

Kytkimet

Kytkimessä on mukautetun valintaruudun merkintä, mutta se käyttää .form-switchluokkaa vaihtokytkimen hahmontamiseen. Harkitse käyttöä role="switch", jos haluat välittää ohjauksen luonteen tarkemmin aputekniikoille, jotka tukevat tätä roolia. Vanhemmissa aputekniikoissa se yksinkertaisesti ilmoitetaan tavalliseksi valintaruuduksi varavaihtoehtona. Kytkimet tukevat myös disabledmääritettä.

Oletuskytkimen valintaruudun syöttö

Valittu kytkimen valintaruudun tulo

Pois käytöstä kytkimen valintaruudun syöttö

Pois käytöstä valittu kytkimen valintaruudun syöttö

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>

Oletus (pinottu)

Oletusarvoisesti mikä tahansa määrä valintaruutuja ja radioita, jotka ovat välittömiä sisaruksia, pinotaan pystysuunnassa ja sopivan välimatkan päässä -merkillä .form-check.

Oletusvalintaruutu

Pois käytöstä -valintaruutu

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>

Oletusradio

Toinen oletusradio

Radio pois käytöstä

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>

Linjassa

Ryhmittele valintaruudut tai radiot samalle vaakariville lisäämällä .form-check-inlinene mihin tahansa .form-check.

3 (pois käytöstä)

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 (pois käytöstä)

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>

Käänteinen

Aseta valintaruudut, radiot ja kytkimet vastakkaiselle puolelle .form-check-reversemuokkausluokan kanssa.

Käänteinen valintaruutu

Käänteinen valintaruutu poistettu käytöstä

Käänteinen kytkin valintaruudun tulo

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>

Ilman etikettejä

Jätä kääriminen pois .form-checkvalintaruuduista ja radioista, joissa ei ole tarratekstiä. Muista silti antaa jonkinlainen helppokäyttöinen nimi avustaville tekniikoille (esimerkiksi käyttämällä aria-label). Katso lisätietoja lomakkeiden yleiskatsauksen esteettömyysosiosta .

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>

Vaihtopainikkeet

Luo painikkeen kaltaisia valintaruutuja ja -painikkeita käyttämällä .btntyylejä elementtien .form-check-labelsijaan <label>. Nämä vaihtopainikkeet voidaan tarvittaessa ryhmitellä edelleen painikeryhmään .

Valintaruutujen vaihtopainikkeet

Yksi kytkin

html

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

Tarkistettu

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>

Liikuntarajoitteinen

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>

Visuaalisesti nämä valintaruutujen vaihtopainikkeet ovat identtisiä painikelaajennuksen vaihtopainikkeiden kanssa . Avustavat tekniikat välittävät ne kuitenkin eri tavalla: näytönlukijat ilmoittavat valintaruutujen vaihtopainikkeet "valituiksi"/"ei valittuiksi" (koska ulkonäöstään huolimatta ne ovat pohjimmiltaan edelleen valintaruutuja), kun taas painikelaajennuksen vaihtopainikkeet ovat ilmoitetaan "painiketta"/"painiketta painettuna". Valinta näiden kahden lähestymistavan välillä riippuu luomasi vaihtokytkimen tyypistä ja siitä, onko kytkin järkevää käyttäjille, kun se ilmoitetaan valintaruuduna vai varsinaisena painikkeena.

Radion vaihtopainikkeet

Tarkistettu Radio Liikuntarajoitteinen 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>

Piirretyt tyylit

Eri muunnelmia .btn, kuten eri hahmoteltuja tyylejä, tuetaan.

Yksi kytkin
Tarkistettu
Tarkistettu menestysradio Vaara 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

Muuttujat

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