স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
Check
in English

চেক এবং রেডিও

আমাদের সম্পূর্ণ পুনঃলিখিত চেক উপাদানের সাথে সামঞ্জস্যপূর্ণ ক্রস-ব্রাউজার এবং ক্রস-ডিভাইস চেকবক্স এবং রেডিও তৈরি করুন।

এই পৃষ্ঠায়

এপ্রোচ

ব্রাউজার ডিফল্ট চেকবক্স এবং রেডিওগুলির সাহায্যে প্রতিস্থাপিত হয় .form-check, উভয় প্রকারের ইনপুটগুলির জন্য ক্লাসের একটি সিরিজ যা তাদের HTML উপাদানগুলির বিন্যাস এবং আচরণকে উন্নত করে, যা আরও বেশি কাস্টমাইজেশন এবং ক্রস ব্রাউজার সামঞ্জস্য প্রদান করে। চেকবক্সগুলি একটি তালিকার এক বা একাধিক বিকল্প নির্বাচন করার জন্য, যখন রেডিওগুলি অনেকগুলি থেকে একটি বিকল্প নির্বাচন করার জন্য।

কাঠামোগতভাবে, আমাদের <input>s এবং s হল একটি <label>সহোদর উপাদানের বিপরীতে । এটি কিছুটা বেশি শব্দসমৃদ্ধ কারণ আপনাকে অবশ্যই উল্লেখ করতে হবে এবং এবং এর সাথে সম্পর্কযুক্ত বৈশিষ্ট্যগুলি । আমরা আমাদের সমস্ত রাজ্যের জন্য ভাইবোন নির্বাচক ( ) ব্যবহার করি , যেমন বা । ক্লাসের সাথে একত্রিত হলে , আমরা '-এর অবস্থার উপর ভিত্তি করে প্রতিটি আইটেমের জন্য পাঠ্যকে সহজেই স্টাইল করতে পারি ।<input><label>idfor<input><label>~<input>:checked:disabled.form-check-label<input>

আমাদের চেক চেক করা বা অনির্দিষ্ট অবস্থা নির্দেশ করতে কাস্টম বুটস্ট্র্যাপ আইকন ব্যবহার করে।

চেক করে

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(এটি নির্দিষ্ট করার জন্য কোনও উপলব্ধ 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>গুলি স্বয়ংক্রিয়ভাবে স্টাইল করা হয় যাতে ইনপুটের অবস্থা বোঝাতে সাহায্য করার জন্য হালকা রঙের সাথে মেলে।

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>

অক্ষম

অ্যাট্রিবিউট যোগ করুন disabledএবং সংশ্লিষ্ট <label>গুলি স্বয়ংক্রিয়ভাবে স্টাইল করা হয় যাতে ইনপুটের অবস্থা বোঝাতে সাহায্য করার জন্য হালকা রঙের সাথে মেলে।

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।

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>
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>
Visually, these checkbox toggle buttons are identical to the button plugin toggle buttons. However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.

Radio toggle buttons

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>

Outlined styles

Different variants of .btn, such at the various outlined styles, are supported.



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;