• Components
  • Toggle

Toggle 

@!jrmc.form.toggle({ name: 'my_name'  })
<input
  type="checkbox"
  class="toggle"
   name="my_name"
   id="my_name"
  
  
  
  value=""
/>

Toggle color 

@!jrmc.form.toggle({ class: 'toggle-primary', checked: true })
@!jrmc.form.toggle({ class: 'toggle-secondary', checked: true })
@!jrmc.form.toggle({ class: 'toggle-accent', checked: true })
<input
  type="checkbox"
  class="toggle toggle-primary"
  
  
  
   checked="checked"
  
  value=""
/>

<input
  type="checkbox"
  class="toggle toggle-secondary"
  
  
  
   checked="checked"
  
  value=""
/>

<input
  type="checkbox"
  class="toggle toggle-accent"
  
  
  
   checked="checked"
  
  value=""
/>

Toggle size 

@!jrmc.form.toggle({ class: 'toggle-lg', checked: true })
@!jrmc.form.toggle({ class: 'toggle-md', checked: true })
@!jrmc.form.toggle({ class: 'toggle-sm', checked: true })
@!jrmc.form.toggle({ class: 'toggle-xs', checked: true })
<input
  type="checkbox"
  class="toggle toggle-lg"
  
  
  
   checked="checked"
  
  value=""
/>

<input
  type="checkbox"
  class="toggle toggle-md"
  
  
  
   checked="checked"
  
  value=""
/>

<input
  type="checkbox"
  class="toggle toggle-sm"
  
  
  
   checked="checked"
  
  value=""
/>

<input
  type="checkbox"
  class="toggle toggle-xs"
  
  
  
   checked="checked"
  
  value=""
/>

Toggle disabled 

@!jrmc.form.toggle({ disabled: true, checked: true })
<input
  type="checkbox"
  class="toggle"
  
  
  
   checked="checked"
  disabled
  value=""
/>

Toggle control 

@jrmc.form.control({ label: false, class: ['w-full', 'max-w-xs'] })
  @jrmc.form.label({ class: 'cursor-pointer', text: 'Are you sure?' })
    @!jrmc.form.toggle({ checked: true })
  @end
@end
<div class="form-control mb-5 w-full max-w-xs" >

  <label class="label cursor-pointer" >
<span class="label-text" >
  Are you sure?</span>  <input
  type="checkbox"
  class="toggle"
  
  
  
   checked="checked"
  
  value=""
/>

</label>
</div>