Saltar al contenido principal Salta a docs navegación
Check
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

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

html nisqapi 
<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.

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

Radiokuna

html nisqapi 
<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.

html nisqapi 
<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.

html nisqapi 
<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.

html nisqapi 
<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>
html nisqapi 
<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.

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

Qipaman

Chay cuadrokunayki, radiokunayki chaymanta interruptoresniykikuna chimpa ladoman churay kay .form-check-reversemodificador clase kaqwan.

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

Sin etiquetas

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

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

html nisqapi 
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
html nisqapi 
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
html nisqapi 
<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

html nisqapi 
<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.



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