צ'קים ומכשירי רדיו

צור תיבות סימון ומכשירי רדיו עקביים בין דפדפנים ומכשירים עם רכיב ההמחאות המשוכתב לחלוטין שלנו.

בעמוד זה

גִישָׁה

תיבות הסימון ומכשירי הרדיו של דפדפן המוגדרים כברירת מחדל מוחלפים בעזרת .form-check, סדרה של מחלקות עבור שני סוגי הקלט המשפרת את הפריסה וההתנהגות של רכיבי ה-HTML שלהם, המספקות התאמה אישית רבה יותר ועקביות חוצה דפדפן. תיבות סימון מיועדות לבחירת אפשרות אחת או מספר אפשרויות ברשימה, בעוד שמכשירי רדיו מיועדים לבחירת אפשרות אחת מתוך רבות.

מבחינה מבנית, ה- <input>s וה-s שלנו <label>הם אלמנטים אחים בניגוד ל- <input>בתוך a <label>. זה מעט יותר מילולי כפי שעליך לציין idותכונות forכדי לקשר את ה- <input>ו <label>. אנו משתמשים בבורר האחים ( ~) עבור כל <input>המדינות שלנו, כמו :checkedאו :disabled. בשילוב עם .form-check-labelהכיתה, נוכל לעצב בקלות את הטקסט עבור כל פריט בהתבסס על המצב <input>'s.

ההמחאות שלנו משתמשות בסמלי Bootstrap מותאמים אישית כדי לציין מצבים מסומנים או בלתי מוגדרים.

צ'קים

תיבת סימון ברירת מחדל

תיבת סימון מסומנת

html

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

לֹא קָבוּעַ

תיבות סימון יכולות להשתמש :indeterminateבמחלקת הפסאודו כאשר הן מוגדרות ידנית באמצעות JavaScript (אין תכונת HTML זמינה לציון אותה).

תיבת סימון בלתי מוגדרת

html

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

נָכֶה

הוסף את disabledהתכונה וה- <label>s המשויכים מעוצבים אוטומטית כך שיתאימו לצבע בהיר יותר כדי לעזור לציין את מצב הקלט.

תיבת סימון בלתי מוגדרת מושבתת

תיבת סימון מושבתת

מושבת מסומנת תיבת סימון

html

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

רדיו

רדיו ברירת מחדל

רדיו מסומן כברירת מחדל

html

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

נָכֶה

רדיו מושבת

רדיו מסומן מושבת

html

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

מתגים

למתג יש סימון של תיבת סימון מותאמת אישית אך משתמש .form-switchבמחלקה לעיבוד מתג החלפה. שקול להשתמש role="switch"כדי להעביר בצורה מדויקת יותר את אופי הבקרה לטכנולוגיות מסייעות שתומכות בתפקיד זה. בטכנולוגיות מסייעות ישנות יותר, זה פשוט יוכרז כתיבת סימון רגילה כחלופה. מתגים גם תומכים disabledבתכונה.

קלט ברירת מחדל של תיבת סימון מתג

מסומן קלט תיבת סימון מתג

קלט תיבת סימון מתג מושבת

כניסת תיבת הסימון של מתג מושבתת

html

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

ברירת מחדל (ערימה)

כברירת מחדל, כל מספר של תיבות סימון ומכשירי רדיו שהם אחים מיידיים יהיו מוערמים אנכית ומרווחים כראוי עם .form-check.

תיבת סימון ברירת מחדל

תיבת סימון מושבתת

html

<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

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

בשורה

קבץ תיבות סימון או מכשירי רדיו באותה שורה אופקית על ידי הוספה .form-check-inlineלכל .form-check.

3 (מושבת)

html

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

3 (מושבת)

html

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

לַהֲפוֹך

שים את תיבות הסימון, מכשירי הרדיו והמתגים שלך בצד הנגדי עם .form-check-reverseמחלקת השינוי.

תיבת סימון הפוך

תיבת סימון היפוך מושבתת

קלט תיבת סימון מתג הפוך

html

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

בלי תוויות

השמט את העטיפה .form-checkעבור תיבות סימון ומכשירי רדיו שאין להם טקסט תווית. זכור עדיין לספק צורה כלשהי של שם נגיש עבור טכנולוגיות מסייעות (לדוגמה, באמצעות aria-label). לפרטים, עיין בסעיף נגישות סקירת הטפסים .

html

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

החלפת לחצנים

צור תיבות סימון וכפתורי בחירה דמויי כפתור על ידי שימוש .btnבסגנונות במקום .form-check-labelעל <label>האלמנטים. ניתן לקבץ לחצני החלפה אלה בקבוצת לחצנים במידת הצורך.

לחצני החלפת תיבת סימון

מתג יחיד

html

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

בָּדוּק

html

<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

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

מבחינה ויזואלית, לחצני החלפת תיבת סימון אלה זהים ללחצני החלפת הפלאגין של כפתורים . עם זאת, הם מועברים בצורה שונה על ידי טכנולוגיות מסייעות: מתגי הסימון יוכרזו על ידי קוראי המסך כ"מסומנים"/"לא מסומנים" (מכיוון שלמרות המראה שלהם, הם עדיין ביסודם תיבות סימון), בעוד שכפתורי החלפת הפלאגין של הכפתורים יהיו הוכרז כ"כפתור"/"לחצן לחוץ". הבחירה בין שתי הגישות הללו תהיה תלויה בסוג החלפת הלחצן שאתה יוצר, והאם המעבר יהיה הגיוני למשתמשים כאשר הוכרז כתיבת סימון או ככפתור בפועל.

לחצני החלפת רדיו

בָּדוּק רָדִיוֹ נָכֶה רָדִיוֹ

html

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

סגנונות מתארים

וריאציות שונות של .btn, כגון בסגנונות המתוארים השונים, נתמכות.

מתג יחיד
בָּדוּק
בדק רדיו הצלחה רדיו סכנה

html

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

סאס

משתנים

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