Ynex - Check$Radios

Checks

Default checkbox

Checked checkbox


 <Form.Check  label="Default checkbox"/>
 <Form.Check defaultChecked     
  label="Checked checkbox"/>

Disabled

Disabled checkbox

Disabled checked checkbox


 <Form.Check disabled  label="Disabled checkbox"/>
 <Form.Check disabled defaultChecked
  label="Disabled checked checkbox"/>

Radios

Default radio

Default checked radio


<Form.Check type="radio"  label="Default radio"/>
<Form.Check type="radio" defaultChecked  
label="Default checked radio"/>

Disabled

Default radio

Default checked radio


<Form.Check type="radio" disabled  label="Default radio"/>
<Form.Check type="radio" disabled defaultChecked 
 label="Default checked radio"/>

Default (stacked)

Default checkbox

Disabled checkbox

Default Radio

Disabled Radio


   <Form.Check label="Default checkbox" />
   <Form.Check disabled label="Disabled checkbox" />
   <Form.Check type="radio" label="Default Radio" />
   <Form.Check type="radio" disabled label="Disabled Radio" />

Switches

Default switch checkbox input

Default checked switch checkbox input


 <Form.Check disabled  label="Disabled checkbox"/>
 <Form.Check disabled defaultChecked
  label="Disabled checked checkbox"/>

Checkbox Sizes

Default

Medium

Large


<Form.Check type="radio"  label="Default radio"/>
<Form.Check type="radio" defaultChecked  
label="Default checked radio"/>

Radio Sizes

Default

Medium

Large


<Form.Check type="radio" disabled  label="Default radio"/>
<Form.Check type="radio" disabled defaultChecked 
 label="Default checked radio"/>

Switch Sizes

Default

Medium

Large


<Form.Check  label="Default checkbox"/>
<Form.Check disabled  label="Default checkbox"/>
<Form.Check type="radio"  label="Default checkbox"/>
<Form.Check type="radio" disabled  label="Default checkbox"/>

Inline

3 (disabled)


<Form.Check type="switch"  label="Default switch checkbox input"/>
<Form.Check type="switch" defaultChecked  label="Default switch checkbox input"/>
<Form.Check type="switch" disabled  label="Default switch checkbox input"/>
<Form.Check type="switch" disabled defaultChecked  label="Default switch checkbox input"/>

Without labels


<Form.Check type="checkbox" defaultChecked  label="Default"/>
<Form.Check className="form-check-md d-flex align-items-center"
 type="checkbox" defaultChecked id="checkebox-md"  label="Medium"/>
<Form.Check className="form-check-lg d-flex align-items-center" 
type="checkbox" defaultChecked id="checkebox-lg"  label="Large"/>

Reverse

Reverse checkbox

Disabled reverse checkbox

Reverse switch checkbox input


 <Form.Check type="radio" label="Default"/>
 <Form.Check type="radio" className="form-check-md" id="Radio-md"  label="Medium"/>
 <Form.Check type="radio" className="form-check-lg" 
  defaultChecked id="Radio-lg"  label="Large"/>

Outlined styles

Single toggle
Checked
Checked success radioDanger radio


 <Form.Check type="switch" label="Default"/>
 <Form.Check type="switch" className="form-check-md form-switch" id="switch-md"  label="Medium"/>
 <Form.Check type="switch" className="form-check-lg form-switch" 
  defaultChecked id="switch-lg"  label="Large"/>

Radio toggle buttons


 <Form.Check className="form-check-inline" type="checkbox" label="1"/>
 <Form.Check className="form-check-inline" type="checkbox" label="2"/>
 <Form.Check className="form-check-inline" disabled type="checkbox"
  label="3 (disabled)"/>
 <Form.Check className="form-check-inline" type="radio" label="1"/>
 <Form.Check className="form-check-inline" type="radio" label="2"/>
 <Form.Check className="form-check-inline" disabled type="radio"
  label="3 (disabled)"/>

Checkbox toggle buttons

Single toggleCheckedDisabled


<span className="me-3">
<Form.Check className="" type="checkbox" /></span>
<span><Form.Check className="" type="radio" /></span>

Colored Checkboxes

Primary

Secondary

Warning

Info

Success

Danger

Dark


 <Form.Check 
 className="form-check-reverse mb-3"
  type="checkbox" 
  label="Reverse checkbox" />
 <Form.Check 
 className="form-check-reverse mb-3" 
 type="checkbox" disabled 
 label="Disabled reverse checkbox" />
 <Form.Check 
 className="form-check-reverse mb-3" 
 type="switch" 
 label="Reverse switch checkbox input" />

Outline Checkboxes

Primary

Secondary

Warning

Info

Success

Danger

Dark


<Form.Control type="checkbox" 
className="btn-check"id="btn-check-outlined"/>
<Button variant='outline-primary' 
className="mb-3">Single toggle</Button><br/>
<Form.Check type="checkbox"
className="btn-check" id="btn-check-2-outlined" defaultChecked />
<Button variant='outline-secondary' 
className=" mb-3">Checked</Button><br/>
<Form.Check type="radio" className="btn-check" 
name="options-outlined" id="success-outlined"
 defaultChecked/>
<Button variant='outline-success' 
className="m-1">Checked success
radio</Button>
<Form.Check type="radio" className="btn-check"
 name="options-outlined" id="danger-outlined"
/>
<Button variant='outline-danger'className="m-1"
 >Danger radio</Button>

Colored Radios

Primary

Secondary

Warning

Info

Success

Danger

Dark


<Form.Check type="radio" className="btn-check" name="options"
 id="option1" defaultChecked/>
<Button className="btn btn-primary m-1">Checked</Button>
<Form.Check type="radio" className="btn-check" name="options" 
id="option2" />
<Button className="btn btn-primary m-1">Radio</Button>
<Form.Check type="radio" className="btn-check" name="options" 
id="option3" disabled/>
<Button disabled className="btn btn-primary m-1">Disabled</Button>
<Form.Check type="radio" className="btn-check" name="options" 
id="option4"/>
<Button className="btn btn-primary m-1">Radio</Button>

Outline Radios

Primary

Secondary

Warning

Info

Success

Danger

Dark


<Form.Check type="checkbox" className="btn-check" id="btn-check"/>
<Button className="btn btn-primary m-1">Single toggle</Button>
<Form.Check type="checkbox" className="btn-check" id="btn-check-2" defaultChecked />
<Button className="btn btn-primary m-1">Checked</Button>
<Form.Check type="checkbox" className="btn-check" id="btn-check-3"disabled/>
<Button disabled className="btn btn-primary m-1">Disabled</Button>

Switches Colors

Primary

Secondary

Warning

Info

Success

Danger

Dark


 <div className="form-check mb-2">
 <input type="checkbox" value=""  className="form-check-input form-checked"
   id="primaryChecked" defaultChecked/>
   <label className="form-check-label" htmlFor="primaryChecked">
       Primary
   </label>
</div>
<div className="form-check mb-2">
<input type="checkbox" value="" 
className="form-check-input form-checked-secondary"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    Secondary
</label>
</div>
<div className="form-check mb-2">
<input type="checkbox" value="" 
className="form-check-input form-checked-warning"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    Warning
</label>
</div>
<div className="form-check mb-2">
<input type="checkbox" value="" 
className="form-check-input form-checked-info"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    info
</label>
</div>

Toggle Switches Style-1


<div className="form-check mb-2">
<input type="checkbox" className="form-check-input form-checked-outline"
  id="primaryChecked" defaultChecked/>
  <label className="form-check-label" htmlFor="primaryChecked">
      Primary
  </label>
</div>
<div className="form-check mb-2">
<input type="checkbox" value="" 
className="form-check-input form-checked-outline-secondary"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
   Secondary
</label>
</div>
<div className="form-check mb-2">
<input type="checkbox" value="" 
className="form-check-input form-checked-outline-warning"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
   Warning
</label>
</div>
<div className="form-check mb-2">
<input type="checkbox" value="" 
className="form-check-input form-checked-info"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
   info
</label>
</div>

Toggle Switches Style-2


 <div className="form-check mb-2">
 <input type="radio" className="form-check-input form-checked"
   id="primaryChecked" defaultChecked/>
   <label className="form-check-label" htmlFor="primaryChecked">
       Primary
   </label>
</div>
<div className="form-check mb-2">
<input type="radio" value="" 
className="form-check-input form-checked-secondary"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    Secondary
</label>
</div>
<div className="form-check mb-2">
<input type="radio" value="" 
className="form-check-input form-checked-warning"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    Warning
</label>
</div>
<div className="form-check mb-2">
<input type="radio" value="" 
className="form-check-input form-checked-info"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    info
</label>
</div>

Toggle Switch-1 Sizes

Small size toggle switch toggle-sm

Default toggle switch

Large size toggle switch toggle-lg


 <div className="form-check mb-2">
 <input type="radio" className="form-check-input form-checked-outline form-checked"
   id="primaryChecked" defaultChecked/>
   <label className="form-check-label" htmlFor="primaryChecked">
       Primary
   </label>
</div>
<div className="form-check mb-2">
<input type="radio" 
className="form-check-input form-checked-outline form-checked-secondary"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    Secondary
</label>
</div>
<div className="form-check mb-2">
<input type="radio" 
className="form-check-input form-checked-outline form-checked-warning"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    Warning
</label>
</div>
<div className="form-check mb-2">
<input type="radio" 
className="form-check-input form-checked-outline form-checked-info"
id="primaryChecked" defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    info
</label>
</div>

Toggle Switch-2 Sizes

Small size toggle switch toggle-sm

Default toggle switch

Large size toggle switch toggle-lg


 <div className="form-check form-switch mb-2">
 <input type="radio" className="form-check-input  form-checked"
   id="primaryChecked"  role="switch"defaultChecked/>
   <label className="form-check-label" htmlFor="primaryChecked">
       Primary
   </label>
</div>
<div className="form-check form-switch mb-2">
<input type="radio" 
className="form-check-input  form-checked-secondary"
id="secondaryChecked"  role="switch"defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    Secondary
</label>
</div>
<div className="form-check form-switch mb-2">
<input type="radio" 
className="form-check-input  form-checked-warning"
id="warningChecked"  role="switch"defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    Warning
</label>
</div>
<div className="form-check form-switch mb-2">
<input type="radio" 
className="form-check-input  form-checked-info"
id="infoChecked"  role="switch"defaultChecked/>
<label className="form-check-label" htmlFor="primaryChecked">
    info
</label>
</div>

Switcher

Checks & Radios