چک‌باکس‌ها و رادیو دکمه‌های Bootstrap 5

چک بافه

اگر می‌خواهید کاربران بتوانند از لیست پیش‌فرض گزینه‌ها تعداد دلخواهی انتخاب کنند، از چک بافه استفاده کنید.

مثال

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">گزینه 1</label>
</div>

به طور شخصی امتحان کنید

مثال توضیحی

برای تنظیم استایل چک بافه، از class="form-check" برای اطمینان از اینکه برچسب و چک بافه دارای حاشیه مناسب هستند.

پوشش دهنده .form-check-label کلاس اضافه کردن به عناصر برچسب و سپس .form-check-input افزودن به .form-check درون قالب، برای تنظیم درست استایل چک باکس استفاده کنید.

اگر می‌خواهید چک باکس به صورت پیش‌فرض انتخاب شده باشد، از checked ویژگی‌ها.

دکمه‌های رادیویی

اگر می‌خواهید کاربران فقط بتوانند یکی از گزینه‌های لیست پیش‌پیکربندی شده را انتخاب کنند، از دکمه‌های رادیویی استفاده کنید.

مثال

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>گزینه 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">گزینه 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>گزینه 3
  <label class="form-check-label"></label>
</div>

به طور شخصی امتحان کنید

دکمه تغییر حالت

اگر می‌خواهید چک باکس را به صورت کلید تغییر حالت (toggle switch) تنظیم کنید، لطفاً .form-switch کلاس با .form-check استفاده مشترک قالب:

مثال

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">حالت تاریک</label>
</div>

به طور شخصی امتحان کنید