Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Cheekii fi raadiyoo

Qaama sakatta'iinsaa keenya guutummaatti irra deebi'amee barreeffame waliin saanduqawwan filannoo qaxxaamuraa-browzarii fi qaxxaamuraa meeshaa fi raadiyoowwan walfakkaatan uumi.

Fuula kana irratti

Akkaataa

Sanduuqawwan filannoo durtii biraawzarii fi raadiyoowwan gargaarsa .form-check, tartiiba gita gosoota galtee lamaaniif kan haalata fi amala qaamolee HTML isaanii fooyyessu, kanneen dhuunfachiisaa guddaa fi walsimannaa qaxxaamuraa biraawwaaraa kennan bakka bu'u. Sanduuqonni filannoo tarree tokko keessatti filannoo tokko ykn hedduu filachuuf yoo ta'an, raadiyoowwan ammoo filannoo tokko baay'ee keessaa filachuuf.

Caasaadhaan, <input>s fi s keenya <label>elementoota obbolaa yoo ta’an faallaa an <input>keessaa a <label>. Kun xiqqoo jechoota caalaa waan ta'eef fi amaloota idfi forwalqabsiisuuf ifteessuu qabda . Filataa obbolaa ( ) kutaalee keenya hundaaf fayyadamna, akka ykn . Yeroo gita waliin walitti makamu , barruu tokkoon tokkoo wantaaf haala 's irratti hundaa'uun salphaatti akkaataa itti ta'uu dandeenya .<input><label>~<input>:checked:disabled.form-check-label<input>

Sakatta'iinsi keenya haalawwan sakatta'aman ykn hin murtoofne agarsiisuuf mallattoolee Bootstrap amala fayyadamu.

Cheekii godha

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

Murteessuu hin dandeenye

Sanduuqonni filannoo gita sobaa fayyadamuu danda'u :indeterminateyeroo harkaan karaa JaavaScript saagamu (amalli HTML ifteessuuf hin jiru).

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

Miidhamaa

Amala dabali disabledfi s walqabatan <label>ofumaan akkaataa galtee agarsiisuuf gargaaruuf halluu ifa ta'een walsimsiisuuf akkaataa itti taasifamu.

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

Raadiyoowwan

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

Miidhamaa

Amala dabali disabledfi s walqabatan <label>ofumaan akkaataa galtee agarsiisuuf gargaaruuf halluu ifa ta'een walsimsiisuuf akkaataa itti taasifamu.

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

Jijjiirraa

Jijjiirraan mallattoo sanduuqa filannoo amala qaba garuu .form-switchjijjiiraa jijjiirraa agarsiisuuf gita fayyadama. role="switch"Maalummaa to’annoo gara teeknooloojiiwwan gargaarsaa gahee kana deeggaranitti sirritti dabarsuudhaaf fayyadamuu yaadaa . Teeknooloojiiwwan gargaarsaa durii keessatti, salphaatti akka sanduuqa filannoo idileetti akka duubatti deebi'uutti ni beeksifama. Jijjiirraawwan amallichas ni deeggaru disabled.

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

Durtii (tuulame) .

Akka durtiitti, lakkoofsi kamiyyuu saanduqawwan filannoo fi raadiyoowwan obboleessa battalaa ta'an vertikaaliin tuulamanii fi haala sirrii ta'een addaan baafamanii .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>

Sarara keessaa

Sanduuqawwan filannoo ykn raadiyoo tarree qajeelaa walfakkaataa irratti .form-check-inlinekamiyyuu irratti dabaluudhaan garee .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>

Asxaa malee

.form-checkSanduuqawwan filannoo fi raadiyoowwan barruu asxaa hin qabneef marfata dhiisi . Ammas teeknooloojiiwwan gargaarsaaf maqaa dhaqqabamaa bifa tokko tokko kennuu yaadadhu (fakkeenyaaf, fayyadamuu aria-label). Bal'ina isaaf kutaa dhaqqabummaa ilaalcha waliigalaa unkaalee ilaali .

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

Qabduu jijjiiri

Sanduuqawwan filannoo qaree fakkaatu fi qaree raadiyoo elementoota irratti .btnosoo hin taane akkaataa fayyadamuun uumi. Qabduulee jijjiirraa kun yoo barbaachise garee qaree keessatti daran garee ta'uu danda'u..form-check-label<label>

Qabduulee jijjiirraa sanduuqa filannoo

<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>
Mul'ataan, qaree jijjiirraa sanduuqa filannoo kun qaree jijjiirraa ifteessaa qaree wajjin walfakkaata . Haa ta’u malee, isaan teknooloojiiwwan gargaarsaatiin haala adda ta’een dabarfamu: jijjiirraan saanduqa filannoo dubbistoota iskiriiniitiin akka “mallatteeffame”/“hin mallatteeffamne” ta’ee ni beeksifama (sababni isaas, mul’atanis, bu’uuraan ammallee saanduqa filannoo waan ta’aniif), qafooleen jijjiirraa pilaagii buttooni garuu ni ta’u “button”/“button pressed” jedhamee beeksise. Filannoon malawwan lamaan kana gidduu jiru gosa jijjiirraa ati uumtu irratti hundaa'a, fi jijjiirraan fayyadamtootaaf hiika qabaachuu fi dhiisuu isaa yeroo akka sanduuqa filannootti ykn akka qaree qabatamaatti beeksifamu.

Qabduu jijjiirraa raadiyoo

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

Akkaataawwan ibsaman

Garaagarummaan adda addaa .btnkan , kan akka akkaataa adda addaa ibsaman irratti, ni deeggaramu.



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

Jijjiiramoota

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