- Basic Usage
- Prop Table
import { Toggle } from '@duik/it'import Toggle from '@duik/toggle'Toggles work the same way as checkboxes, e.g. you can group them with "name" property in your forms.
<Toggle defaultChecked /><label class="form-check form-group toggle"> <input type="checkbox" class="form-check-input" checked="" /> <span class="form-check-label"></span> </label> ReactHTML Snippet | |
<Toggle label="Check me" /><label class="form-check form-group toggle"> <input type="checkbox" class="form-check-input" /> <span class="form-check-label">Check me</span> </label> ReactHTML Snippet | |
<Toggle description="With Description" label="Toggle" /><label class="form-check form-group toggle"> <input type="checkbox" class="form-check-input" /> <span class="form-check-label">Toggle</span> <p class="form-check-description">With Description</p> </label> ReactHTML Snippet | |
<Toggle description="With Description" disabled label="Toggle" /><label class="form-check form-group toggle"> <input type="checkbox" class="form-check-input" disabled="" /> <span class="form-check-label">Toggle</span> <p class="form-check-description">With Description</p> </label> ReactHTML Snippet |
| className | Required: false |
| type: string | |
| className, e.g. "my-custom-styling" |
| label | Required: false |
| type: React.ReactNode | |
| Label text or node |
| description | Required: false |
| type: React.ReactNode | |
| Label text or node |
| ...rest | Required: false |
| type: any | |
| Other properties are passed to the input element |