چک باکس ها و رادیوها

  1. فرم ها
  2. چک باکس ها و رادیوها

چک باکس

چک باکس پیش فرض

استفاده کنید type="checkbox" ویژگی برای تنظیم یک چک باکس و اضافه کردن checked ویژگی برای تنظیم یک چک باکس که به طور پیش فرض علامت زده شده است.

چک باکس غیرفعال شد

استفاده کنید disabled ویژگی برای تنظیم یک چک باکس غیرفعال و اضافه کردن checked ویژگی برای تنظیم یک چک باکس که به طور پیش فرض علامت زده شده است.

چک باکس سمت راست

استفاده کنید form-check-right class to form-check class برای تنظیم یک چک باکس در سمت راست.

نامشخص

 <!-- Base Example -->
<div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" id="formCheck1">
    <label class="form-check-label" for="formCheck1">
        Default checkbox
    </label>
</div> 

 <div class="form-check">
    <input class="form-check-input" type="checkbox" id="formCheck2" checked="">
    <label class="form-check-label" for="formCheck2">
        Checked checkbox
    </label>
</div> 

 <!-- Disabled Checkbox -->
<div class="form-check form-check-right mb-2">
    <input class="form-check-input" type="checkbox" name="formCheckboxRight" id="formCheckboxRight1" checked="">
    <label class="form-check-label" for="formCheckboxRight1">
        Form Radio Right
    </label>
</div> 

 <div>
    <div class="form-check form-check-right">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexCheckCheckedDisabled">
            Disabled checked checkbox
        </label>
    </div>
</div> 

 <!-- Form Checkbox Right -->
<div class="form-check form-check-right mb-2">
    <input class="form-check-input" type="checkbox" name="formCheckboxRight" id="formCheckboxRight1" checked="">
    <label class="form-check-label" for="formCheckboxRight1">
        Form Radio Right
    </label>
</div> 

 <div>
    <div class="form-check form-check-right">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexCheckCheckedDisabled">
            Disabled checked checkbox
        </label>
    </div>
</div> 

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

چک باکس های سفارشی

استفاده کنید form-check- کلاس با تنوع رنگی که در زیر ذکر شد برای تنظیم کادر انتخاب رنگ.

استفاده کنید form-check-outline کلاس و form-check- کلاس با تنوع رنگی که در زیر ذکر شد برای تنظیم یک چک باکس رنگ با طرح کلی.

 <!-- Custom Checkboxes Color -->
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck6" checked>
    <label class="form-check-label" for="formCheck6">
        Checkbox Primary
    </label>
</div> 
 <div class="form-check form-check-secondary mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck7" checked>
    <label class="form-check-label" for="formCheck7">
        Checkbox Secondary
    </label>
</div> 
 <div class="form-check form-check-success mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck8" checked>
    <label class="form-check-label" for="formCheck8">
        Checkbox Success
    </label>
</div> 
 <div class="form-check form-check-warning mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck9" checked>
    <label class="form-check-label" for="formCheck9">
        Checkbox Warning
    </label>
</div> 
 <div class="form-check form-check-danger mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck10" checked>
    <label class="form-check-label" for="formCheck10">
        Checkbox Danger
    </label>
</div> 
 <div class="form-check form-check-info mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck11" checked>
    <label class="form-check-label" for="formCheck11">
        Checkbox Info
    </label>
</div> 
 <div class="form-check form-check-dark mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck12" checked>
    <label class="form-check-label" for="formCheck12">
        Checkbox Dark
    </label>
</div> 
 <div class="form-check form-check-light">
    <input class="form-check-input" type="checkbox" id="formCheck12" checked>
    <label class="form-check-label" for="formCheck12">
        Checkbox Light
    </label>
</div> 


 <!-- Custom Outline Checkboxes -->
<div class="form-check form-check-outline form-check-primary mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck13" checked>
    <label class="form-check-label" for="formCheck13">
        Checkbox Outline Primary
    </label>
</div> 
 <div class="form-check form-check-outline form-check-secondary mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck14" checked>
    <label class="form-check-label" for="formCheck14">
        Checkbox Outline Secondary
    </label>
</div> 
 <div class="form-check form-check-outline form-check-success mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck15" checked>
    <label class="form-check-label" for="formCheck15">
        Checkbox Outline Success
    </label>
</div> 
 <div class="form-check form-check-outline form-check-warning mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck16" checked>
    <label class="form-check-label" for="formCheck16">
        Checkbox Outline Warning
    </label>
</div> 
 <div class="form-check form-check-outline form-check-danger mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck17" checked>
    <label class="form-check-label" for="formCheck17">
        Checkbox Outline Danger
    </label>
</div> 
 <div class="form-check form-check-outline form-check-info mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck18" checked>
    <label class="form-check-label" for="formCheck18">
        Checkbox Outline Info
    </label>
</div> 
 <div class="form-check form-check-outline form-check-dark mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck19" checked>
    <label class="form-check-label" for="formCheck19">
        Checkbox Outline Dark
    </label>
</div> 
 <div class="form-check form-check-outline form-check-light mb-3">
    <input class="form-check-input" type="checkbox" id="formCheck20" checked>
    <label class="form-check-label" for="formCheck20">
        Checkbox Outline light
    </label>
</div>

رادیوها

رادیوهای پیش فرض

استفاده کنید type="radio" ویژگی برای تنظیم یک دکمه رادیویی و اضافه کردن checked ویژگی برای تنظیم رادیویی که به طور پیش‌فرض بررسی شده است.

رادیوهای غیر فعال

استفاده کنید disabled ویژگی برای تنظیم یک دکمه رادیویی غیرفعال و اضافه کردن checked ویژگی برای تنظیم رادیویی که به طور پیش‌فرض بررسی شده است.

رادیو راست

استفاده کنید form-check-right کلاس به فرم کلاس را بررسی کنید تا یک دکمه رادیویی در سمت راست تنظیم کنید.

 <!-- Base Radios -->
<div class="form-check mb-2">
    <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 Radios -->
<div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
    <label class="form-check-label" for="flexRadioDisabled">
      Disabled radio
    </label>
</div> 

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

 <!-- Form Radio Right -->
<div class="form-check form-check-right mb-3">
    <input class="form-check-input" type="radio" name="formradioRight" id="formradioRight1" checked="">
    <label class="form-check-label" for="formradioRight1">
        Form Radio Right
    </label>
</div> 

 <div>
    <div class="form-check form-check-right">
        <input class="form-check-input" type="radio" value="" id="flexCheckCheckedDisabled" checked disabled>
        <label class="form-check-label" for="flexCheckCheckedDisabled">
            Disabled checked radio
        </label>
    </div>
</div>

رادیو سفارشی

استفاده کنید form-check- کلاس با تنوع رنگی که در زیر ذکر شد برای تنظیم یک رادیو رنگی.

استفاده کنید form-check-outline کلاس و form-check- کلاس با تنوع رنگی که در زیر ذکر شد برای تنظیم یک رادیو رنگی با طرح کلی.

 <!-- Custom Radio Color -->
<div class="form-check form-radio-primary mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor1" id="formradioRight5" checked>
    <label class="form-check-label" for="formradioRight5">
        Radio Primary
    </label>
</div> 
 <div class="form-check form-radio-secondary mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor2" id="formradioRight6" checked>
    <label class="form-check-label" for="formradioRight6">
        Radio Secondary
    </label>
</div> 
 <div class="form-check form-radio-success mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor3" id="formradioRight7" checked>
    <label class="form-check-label" for="formradioRight7">
        Radio Success
    </label>
</div> 
 <div class="form-check form-radio-warning mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor4" id="formradioRight8" checked>
    <label class="form-check-label" for="formradioRight8">
        Radio Warning
    </label>
</div> 
 <div class="form-check form-radio-danger mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor5" id="formradioRight9" checked>
    <label class="form-check-label" for="formradioRight9">
        Radio Danger
    </label>
</div> 
 <div class="form-check form-radio-info mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor6" id="formradioRight10" checked>
    <label class="form-check-label" for="formradioRight10">
        Radio Info
    </label>
</div> 
 <div class="form-check form-radio-dark mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor7" id="formradioRight11" checked>
    <label class="form-check-label" for="formradioRight11">
        Radio Dark
    </label>
</div> 
 <div class="form-check form-radio-light">
    <input class="form-check-input" type="radio" name="formradiocolor8" id="formradioRight12" checked>
    <label class="form-check-label" for="formradioRight12">
        Radio light
    </label>
</div> 

 <!-- Custom Outline Radio -->
<div class="form-check form-radio-outline form-radio-primary mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor9" id="formradioRight13" checked>
    <label class="form-check-label" for="formradioRight13">
        Radio Outline Primary
    </label>
</div> 
 <div class="form-check form-radio-outline form-radio-secondary mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor10" id="formradioRight14" checked>
    <label class="form-check-label" for="formradioRight14">
        Radio Outline Secondary
    </label>
</div> 
 <div class="form-check form-radio-outline form-radio-success mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor11" id="formradioRight15" checked>
    <label class="form-check-label" for="formradioRight15">
        Radio Outline Success
    </label>
</div> 
 <div class="form-check form-radio-outline form-radio-warning mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor12" id="formradioRight16" checked>
    <label class="form-check-label" for="formradioRight16">
        Radio Outline Warning
    </label>
</div> 
 <div class="form-check form-radio-outline form-radio-danger mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor13" id="formradioRight17" checked>
    <label class="form-check-label" for="formradioRight17">
        Radio Outline Danger
    </label>
</div> 
 <div class="form-check form-radio-outline form-radio-info mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor14" id="formradioRight18" checked>
    <label class="form-check-label" for="formradioRight18">
        Radio Outline Info
    </label>
</div> 
 <div class="form-check form-radio-outline form-radio-dark mb-3">
    <input class="form-check-input" type="radio" name="formradiocolor15" id="formradioRight19" checked>
    <label class="form-check-label" for="formradioRight19">
        Radio Outline Dark
    </label>
</div> 
 <div class="form-check form-radio-outline form-radio-light">
    <input class="form-check-input" type="radio" name="formradiocolor16" id="formradioRight20" checked>
    <label class="form-check-label" for="formradioRight20">
        Radio Outline light
    </label>
</div>

سوئیچ ها

سوئیچ های پیش فرض

استفاده کنید form-switch class to form-check class برای تنظیم سوئیچ و افزودن checked ویژگی برای تنظیم یک سوئیچ که به طور پیش فرض بررسی شده است.

سوئیچ های غیرفعال

استفاده کنید disabled ویژگی برای تنظیم یک دکمه رادیویی غیرفعال و اضافه کردن checked ویژگی برای تنظیم یک سوئیچ که به طور پیش فرض بررسی شده است.

سمت راست را تغییر دهید

استفاده کنید form-check-right کلاس به فرم کلاس را بررسی کنید تا دکمه سوئیچ را در سمت راست تنظیم کنید.

اندازه های سوئیچ

استفاده کنید form-switch-md کلاس برای تنظیم دکمه سوئیچ اندازه متوسط ​​و form-switch-lg کلاس به فرم کلاس را بررسی کنید تا به ترتیب دکمه سوئیچ اندازه بزرگ را تنظیم کنید. برای دکمه سوئیچ اندازه کوچک به چنین کلاسی نیاز نیست.

 <!-- Base Switchs -->
<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> 

 <!-- Disabled Switchs -->
<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 Switch Right -->
<div class="form-check form-switch form-check-right">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckRightDisabled" checked>
    <label class="form-check-label" for="flexSwitchCheckRightDisabled">Disabled switch checkbox input</label>
</div> 

 <div class="form-check form-switch form-check-right">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" disabled>
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div> 

 <!-- Switch sizes -->
<div class="form-check form-switch" dir="ltr">
    <input type="checkbox" class="form-check-input" id="customSwitchsizesm" checked="">
    <label class="form-check-label" for="customSwitchsizesm">Small Size Switch</label>
</div> 

 <div class="form-check form-switch form-switch-md" dir="ltr">
    <input type="checkbox" class="form-check-input" id="customSwitchsizemd">
    <label class="form-check-label" for="customSwitchsizemd">Medium Size Switch</label>
</div> 

 <div class="form-check form-switch form-switch-lg" dir="ltr">
    <input type="checkbox" class="form-check-input" id="customSwitchsizelg" checked="">
    <label class="form-check-label" for="customSwitchsizelg">Large Size Switch</label>
</div>

رنگ را تغییر می دهد

استفاده کنید form-check- کلاس با تنوع رنگ زیر برای تنظیم یک سوئیچ رنگ.

 <!-- Switches Color -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck1" checked>
    <label class="form-check-label" for="SwitchCheck1">Switch Default</label>
</div> 
 <div class="form-check form-switch form-switch-secondary">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck2" checked>
    <label class="form-check-label" for="SwitchCheck2">Switch Secondary</label>
</div> 
 <div class="form-check form-switch form-switch-success">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck3" checked>
    <label class="form-check-label" for="SwitchCheck3">Switch Success</label>
</div> 
 <div class="form-check form-switch form-switch-warning">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked>
    <label class="form-check-label" for="SwitchCheck4">Switch Warning</label>
</div> 
 <div class="form-check form-switch form-switch-danger">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck5" checked>
    <label class="form-check-label" for="SwitchCheck5">Switch Danger</label>
</div> 
 <div class="form-check form-switch form-switch-info">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck6" checked>
    <label class="form-check-label" for="SwitchCheck6">Switch Info</label>
</div> 
 <div class="form-check form-switch form-switch-dark">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck7" checked>
    <label class="form-check-label" for="SwitchCheck7">Switch Dark</label>
</div>

سوئیچ های سفارشی

استفاده کنید form-switch-custom کلاس و form-switch- کلاس با تنوع رنگ زیر برای تعیین شعاع رنگ.

 <!-- Custom Switches -->
<div class="form-check form-switch form-switch-custom form-switch-primary">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck9" checked>
    <label class="form-check-label" for="SwitchCheck9">Switch Default</label>
</div> 

 <div class="form-check form-switch form-switch-custom form-switch-secondary">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck10" checked>
    <label class="form-check-label" for="SwitchCheck10">Switch Secondary</label>
</div> 

 <div class="form-check form-switch form-switch-custom form-switch-success">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck11" checked>
    <label class="form-check-label" for="SwitchCheck11">Switch Success</label>
</div> 

 <div class="form-check form-switch form-switch-custom form-switch-warning">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck12" checked>
    <label class="form-check-label" for="SwitchCheck12">Switch Warning</label>
</div> 

 <div class="form-check form-switch form-switch-custom form-switch-danger">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck13" checked>
    <label class="form-check-label" for="SwitchCheck13">Switch Danger</label>
</div> 

 <div class="form-check form-switch form-switch-custom form-switch-info">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck14" checked>
    <label class="form-check-label" for="SwitchCheck14">Switch Info</label>
</div> 

 <div class="form-check form-switch form-switch-custom form-switch-dark">
    <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck15" checked>
    <label class="form-check-label" for="SwitchCheck15">Switch Dark</label>
</div>

چک باکس درون خطی و رادیو

استفاده کنید form-check-inline class to form-check class برای تنظیم افقی چک باکس ها، رادیوها یا سوئیچ ها.

 <!-- Inline Checkbox -->
<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> 

 <!-- Inline Radios -->
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions1" 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="inlineRadioOptions2" 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="inlineRadioOptions3" id="inlineRadio3" value="option3" disabled>
    <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div> 

 <!-- Inline Switches -->
<div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitch">
    <label class="form-check-label" for="inlineswitch">1</label>
</div> 
 <div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitch1">
    <label class="form-check-label" for="inlineswitch1">2</label>
</div> 
 <div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitchdisabled" disabled>
    <label class="form-check-label" for="inlineswitchdisabled">2</label>
</div>

بدون برچسب

بسته بندی را حذف کنید، form-check کلاس برای چک باکس ها، رادیوها یا سوئیچ هایی که فاقد متن برچسب هستند. به یاد داشته باشید که هنوز هم نوعی نام در دسترس برای فناوری های کمکی ارائه کنید (به عنوان مثال، با استفاده از برچسب aria).

 <!-- Without labels Checkbox -->
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
</div> 
 <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
</div> 
 <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
</div> 


 <!-- Without labels Radios -->
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="WithoutinlineRadio1" value="option1">
</div> 
 <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="WithoutinlineRadio2" value="option2">
</div> 
 <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="WithoutinlineRadio3" value="option3" disabled>
</div> 

 <!-- Without labels Switches -->
<div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitch">
</div> 
 <div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitch1">
</div> 
 <div class="form-check form-switch form-check-inline" dir="ltr">
    <input type="checkbox" class="form-check-input" id="inlineswitchdisabled" disabled>
</div>

دکمه های تعویض رادیو

با استفاده از چک باکس های دکمه مانند و دکمه های رادیویی ایجاد کنید btn سبک ها به جای کلاس form-check-label در عناصر 

 <!-- Radio toggle buttons   -->
<div class="hstack gap-2 flex-wrap">
    <input type="radio" class="btn-check" name="options" id="option1"  checked>
    <label class="btn btn-secondary" for="option1">Checked</label>

    <input type="radio" class="btn-check" name="options" id="option2" >
    <label class="btn btn-secondary" for="option2">Radio</label>

    <input type="radio" class="btn-check" name="options" id="option3"  disabled>
    <label class="btn btn-secondary" for="option3">Disabled</label>

    <input type="radio" class="btn-check" name="options" id="option4" >
    <label class="btn btn-secondary" for="option4">Radio</label>
</div>

سبک های مشخص شده

انواع مختلف از btn ویژگی، مانند سبک های مختلف مشخص شده، پشتیبانی می شوند.

 <!-- Outlined Styles -->
<div class="hstack gap-2 flex-wrap">
    <input type="checkbox" class="btn-check" id="btn-check-outlined">
    <label class="btn btn-outline-primary material-shadow" for="btn-check-outlined">Single toggle</label>

    <input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked>
    <label class="btn btn-outline-secondary material-shadow" for="btn-check-2-outlined">Checked</label>

    <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" checked>
    <label class="btn btn-outline-success material-shadow" for="success-outlined">Checked success radio</label>

    <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined">
    <label class="btn btn-outline-danger material-shadow" for="danger-outlined">Danger radio</label>
</div>
© Velzon.
طراحی و توسعه توسط مرداد