Ejupi contenido principal-pe Eike docs jeguatahápe
Check
in English

Cheque ha radio-kuéra

Ejapo umi vore ha radio peteĩchagua navegador kurusu ha dispositivo kurusu rehegua ore componente jesarekorã ojehaijeyva’ekuepaite reheve.

Ko páhinape

Ñemboja

Umi jesarekoha ha radio kundahára ñepyrũrã oñemyengovia pytyvõ rupive .form-check, peteĩ mbo’esyry mbo’esyry mokõive jeikeha ñemohendarã omoporãvéva iñemohenda ha jeiko umi elemento HTML rehegua, ome’ẽva tuichave ñemboheko ha kundahára joaju joaju. Umi cuadro de verificación niko ojeporavo hag̃ua peteĩ térã heta opción peteĩ lista-pe, ha umi radio katu ojeporavo hag̃ua peteĩ opción heta apytégui.

Estructuralmente, ñande <input>s ha <label>s ha e elemento hermano ojoavyva petet petet <input>ryepýpe <label>. Kóva haꞌehína ñeꞌepykuaave michĩmi remombeꞌuvaꞌerãháicha idha forumi atributo rembojoaju hag̃ua <input>ha <label>. Jaipuru pe selector hermano rehegua ( ~) opaite ñande <input>estado-pe g̃uarã, haꞌeháicha :checkedtérã :disabled. Oñembojoajúramo .form-check-labelmboꞌepy ndive, ikatu ñamoĩ estilo jehaipyre peteĩteĩva mbaꞌe rehegua oñemopyendáva <input>'s estado rehe.

Ore jesareko oipuru Bootstrap techaukaha jeporupyre ohechauka hag̃ua estado ojehechava’ekue térã ndojedetermináiva.

Cheque-kuéra rehegua

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

Indeterminado rehegua

Umi vore’i ikatu oipuru pe :indeterminateclase pseudo oñemohenda jave manóme JavaScript rupive (ndaipóri atributo HTML ojeguerekóva ojehechauka hag̃ua).

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

Ñemonandi

Oñemoĩve disabledatributo ha umi <label>s ojoajúva oñemboheko ijeheguiete ojoaju hag̃ua peteĩ saꞌi hesakãvéva ndive oipytyvõ hag̃ua ohechauka hag̃ua mbaꞌeichaitépa oĩ pe entrada.

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

Radio-kuéra rehegua

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

Ñemonandi

Oñemoĩve disabledatributo ha umi <label>s ojoajúva oñemboheko ijeheguiete ojoaju hag̃ua peteĩ saꞌi hesakãvéva ndive oipytyvõ hag̃ua ohechauka hag̃ua mbaꞌeichaitépa oĩ pe entrada.

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

Umi interruptor rehegua

Peteĩ mboajepyréva oguereko peteĩ jehechaukaha jeporupyre jeguerahauka ha katu oipuru .form-switchmbo’esyry ohechauka hag̃ua peteĩ mboajepyréva. Ojehecháta ojeporu role="switch"oñembohasa haguã hekopeteve mba'éichapa pe control umi tecnología oipytyvõvape oipytyvõva ko rol. Umi tecnología pytyvõrã itujavévape, oñemoherakuãta simplemente peteĩ casilla de verificación regular ramo peteĩ fallback ramo. Umi conmutador oipytyvõ avei pe disabledatributo.

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

Por defecto (oñemboguapy) .

Por defecto, oimeraẽ número de casilla de verificación ha radio ha’éva joyke’y pya’e oñembojoajúta verticalmente ha oñemboja’óta hekopete .form-check.

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

En línea rehegua

Embojoaju umi casilla térã radio peteĩ fila horizontal-pe emoĩvo .form-check-inlineoimeraẽva .form-check.

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

Guevi

Emoĩ nde casilla de verificación, radio ha interruptor lado opuesto-pe .form-check-reverseclase modificador ndive.

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

Etiquetas ÿre

Emboyke pe envoltura .form-checkumi casilla de verificación ha radio ndorekóiva etiqueta jehaipyre rehegua. Penemandu’áke peme’ẽ hag̃ua gueteri algún tipo de téra ojeikekuaahápe umi tecnología oipytyvõvape g̃uarã (techapyrã, ojeporúvo aria-label). Ehecha pe sección accesibilidad rehegua formulariokuéra jehechapyrã rehegua umi detalle rehegua.

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

Ombohasa umi botón

Ejapo umi vore vore’i ojoguáva botón-pe ha umi botón radio rehegua eipurúvo estilokuéra umi elemento ári .btnrangue . Ko’ã botón toggle ikatu oñemboatyve peteĩ botón atýpe oñeikotevẽramo..form-check-label<label>

Umi botón oñembohasáva cuadro de verificación

html rehegua 
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
html rehegua 
<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 rehegua 
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
Ojehechaháicha, ko’ã vore’i ñembohekorã ojoguaite umi mboajepyréva mboajepyréva mboajepyréva ndive . Ha katu, oñembohasa ambue hendáicha umi tecnología pytyvõhára rupive: umi toggle casilla de verificación rehegua oikuaaukáta umi pantalla moñe’ẽhára rupive “ojehechava’ekue”/“nojehecháiramo” (oĩgui, jepémo ojehecha, fundamentalmente ha’e gueteri casilla de verificación), ha katu umi botón toggle toggle botón ha’éta oñemoherakuã “botón”/“botón ojepresionáva” ramo. Pe jeporavo ko’ã mokõi enfoque apytépe odependeva’erã mba’eichagua toggle rehegua remoheñóiva rehe, ha pe toggle oguerekótapa sentido térã nahániri puruhárape oñemoherakuãvo peteĩ casilla de verificación ramo térã peteĩ botón añeteguáva ramo.

Umi botón de cambio de radio rehegua

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

Umi estilo oñembohapéva

Oñepytyvõ opaichagua variante .btn, haꞌeháicha umi estilo oñembohapévape.



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

Variables rehegua

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