Ejupi contenido principal-pe Eike docs jeguatahápe
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

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

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

<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

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

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

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

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

En línea rehegua

Embojoaju umi casilla térã radio peteĩ fila horizontal-pe emoĩvo .form-check-inlineoimeraẽva .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>

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.

<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

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

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



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