Saltar al contenido principal Salta a docs navegación
in English

Cheques y radios

Ruway sapanchasqa chakana maskaq chaymanta chakana dispositivo qhaway qutukuna chaymanta radiokuna hunt'asqa musuqmanta qillqasqa qhaway componenteykuwan.

Kay p'anqapi

Asuykuy

Navegador ñawpaqmanta qhaway qutukuna chaymanta radiokuna yanapakuywan tikrasqa kanku .form-check, huk serie clasekuna iskaynin yaykuna layakunapaq chaymanta HTML elementonkupa churayninta chaymanta ruwayninta allinchan, chaymanta aswan ruwana ruwayta chaymanta chakana maskaqpa tupachiyninta qun. Chay cuadros nisqakunaqa huk listapi huk otaq askha akllanakunata akllanapaqmi, radiokunataq askhamanta huk akllanakunata akllanapaq.

Estructuralmente, nuestros <input>s y <label>s son elementos hermanos en contrario a un <input>dentro de un <label>. Kayqa aswan pisi rimayniyuqmi imaynachus idchaymanta foratributokuna chaymanta <input>chaymanta tinkinapaq ninayki tiyan <label>. Llapa suyuykupaq wawqikuna akllaq ( ~) nisqawan llamk'achiyku <input>, :checkedicha hina :disabled. Clasewan kuskachasqa kaptinqa .form-check-label, sapa imapaq qillqasqata <input>'s estadoman hinam mana sasachakuspalla estilochayta atichwan.

Chequeoyku ruwasqa Bootstrap iconokuna llamk'achinku qhawasqa utaq mana determinasqa estadokuna rikuchinankupaq.

Cheques

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

Mana determinasqa

Checkboxes :indeterminatepseudo clase llamk'achiyta atinku mayk'aq makiwan JavaScript kaqnintakama churasqa (mana kanchu HTML atributo chayta willanapaq).

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

Wañuchisqa

Atributota yapay disabledchaymanta tinkisqa <label>s kikinmanta estilochasqa kanku aswan k'anchariq llimp'iwan tupananpaq yanapakuypaq yaykusqapa kayninta rikuchinanpaq.

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

Radiokuna

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

Wañuchisqa

Atributota yapay disabledchaymanta tinkisqa <label>s kikinmanta estilochasqa kanku aswan k'anchariq llimp'iwan tupananpaq yanapakuypaq yaykusqapa kayninta rikuchinanpaq.

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

Interruptores

Huk tikray huk sapanchasqa qhaway qutumanta markayuq ichaqa .form-switchhuk tikray tikrayta ruwanapaq claseta llamk'achin. Considera utilizar role="switch"para más exactamente transmitir la naturaleza del control a tecnologias de ayuda que apoyan este papel. Ñawpa yanapakuy tecnologiakunapi, sapa kuti qhaway qutu hina fallback hina willasqalla kanqa. Switches nisqakunapas disabledatributota yanapan.

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

Ñawpaqmanta churasqa (pilasqa) .

Ñawpaqmanta, mayqin yupay qutukuna chaymanta radiokuna chaylla wawqintin kanku sayaqmanta pilasqa chaymanta allinta espaciasqa kanqa .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>

Inline

.form-check-inlineHuñuy qutukunata icha radiokunata kikin sayaq filapi mayqinmanpas yapaspa .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>

Sin etiquetas

.form-checkMana etiqueta qillqayuq qhaway qutukunapaq chaymanta radiokunapaq p'istuyta saqiy . Yuyariyraq wakin laya yaykuypaq sutita quyta yanapaq tecnologiakunapaq (kayhina, llamk'achispa aria-label). Rikuy formulariokuna qhaway yaykuy atiy t'aqapi aswan sut'inchaykunapaq.

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

Botones nisqakunata tikray

Botón hina qhaway qutukunata chaymanta radio ñit'inakunata ruway .btnestilokunata llamk'achispa .form-check-labelmana <label>elementokunapi llamk'achispa. Kay tikray ñit'inakuna aswan huk ñit'ina huñupi huñusqa kanman sichus necesitakun.

Botones de cambio de cuadro de comprobación

<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>
Rikuypaq, kay qhaway qutu tikray ñit'inakuna kaqlla kanku chaymanta ñit'ina plugin tikray ñit'inakuna . Ichaqa, paykuna huknirayta yanapakuq tecnologiakuna kaqwan apachisqa kanku: chay cuadro de verificación toggles pantalla ñawiriqkunawan willasqa kanqa “checked”/“mana comprobado” hina (imaraykuchus, aunque rikchakusqanku, fundamentalmente checkboxes kankuraq), maypichus chay botón plugin toggle botones kanqa willasqa “botón”/“botón ñit’isqa” hina. Kay iskay ruwanakunapura akllayqa imahina tikray ruwasqaykimanta kanqa, chaymanta sichus utaq mana tikray ruwaqkunaman yuyayniyuq kanqa mayk'aq huk qhaway qutu hina utaq chiqa ñit'ina hina willasqa.

Radiopi kaq botones

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

Estilos contorneados

Huk rikchaq variantekuna .btn, ahinataq imaymana siq'isqa estilokunapi, yanapasqa kanku.



<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

Variables nisqakuna

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