- Forms
- Checkbox and Radio
Checkbox
Default
Code
<!-- default -->
<label class="inline-flex">
<input type="checkbox" class="form-checkbox" checked />
<span>Primary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-success" />
<span>Success</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-secondary" />
<span>Secondary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-danger" />
<span>Danger</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-warning" />
<span>Warning</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-info" />
<span>Info</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-dark" />
<span>Dark</span>
</label>
Default Rounded
Code
<!-- rounded -->
<label class="inline-flex">
<input type="checkbox" class="form-checkbox rounded-full" checked />
<span>Primary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-success rounded-full" />
<span>Success</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-secondary rounded-full" />
<span>Secondary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-danger rounded-full" />
<span>Danger</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-warning rounded-full" />
<span>Warning</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-info rounded-full" />
<span>Info</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-dark rounded-full" />
<span>Dark</span>
</label>
Outline
Code
<!-- outline -->
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-primary" checked />
<span>Primary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-success" />
<span>Success</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-secondary" />
<span>Secondary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-danger" />
<span>Danger</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-warning" />
<span>Warning</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-info" />
<span>Info</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-dark" />
<span>Dark</span>
</label>
Outline Rounded
Code
<!-- rounded -->
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-primary rounded-full" checked />
<span>Primary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-success rounded-full" />
<span>Success</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-secondary rounded-full" />
<span>Secondary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-danger rounded-full" />
<span>Danger</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-warning rounded-full" />
<span>Warning</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-info rounded-full" />
<span>Info</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-dark rounded-full" />
<span>Dark</span>
</label>
Default Text Color
Code
<!-- default -->
<label class="inline-flex">
<input type="checkbox" class="form-checkbox peer" checked />
<span class="peer-checked:text-primary">Primary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-success peer" />
<span class="peer-checked:text-success">Success</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-secondary peer" />
<span class="peer-checked:text-secondary">Secondary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-danger peer" />
<span class="peer-checked:text-danger">Danger</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-warning peer" />
<span class="peer-checked:text-warning">Warning</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-info peer" />
<span class="peer-checked:text-info">Info</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-dark peer" />
<span class="peer-checked:text-dark">Dark</span>
</label>
<!-- outline -->
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-primary peer" checked />
<span class="peer-checked:text-primary">Primary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-success peer" />
<span class="peer-checked:text-success">Success</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-secondary peer" />
<span class="peer-checked:text-secondary">Secondary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-danger peer" />
<span class="peer-checked:text-danger">Danger</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-warning peer" />
<span class="peer-checked:text-warning">Warning</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-info peer" />
<span class="peer-checked:text-info">Info</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-dark peer" />
<span class="peer-checked:text-dark">Dark</span>
</label>
Rounded Text Color
Code
<!-- default -->
<label class="inline-flex">
<input type="checkbox" class="form-checkbox rounded-full peer" checked />
<span class="peer-checked:text-primary">Primary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-success rounded-full peer" />
<span class="peer-checked:text-success">Success</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-secondary rounded-full peer" />
<span class="peer-checked:text-secondary">Secondary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-danger rounded-full peer" />
<span class="peer-checked:text-danger">Danger</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-warning rounded-full peer" />
<span class="peer-checked:text-warning">Warning</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-info rounded-full peer" />
<span class="peer-checked:text-info">Info</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox text-dark rounded-full peer" />
<span class="peer-checked:text-dark">Dark</span>
</label>
<!-- outline -->
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-primary rounded-full peer" checked />
<span class="peer-checked:text-primary">Primary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-success rounded-full peer" />
<span class="peer-checked:text-success">Success</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-secondary rounded-full peer" />
<span class="peer-checked:text-secondary">Secondary</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-danger rounded-full peer" />
<span class="peer-checked:text-danger">Danger</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-warning rounded-full peer" />
<span class="peer-checked:text-warning">Warning</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-info rounded-full peer" />
<span class="peer-checked:text-info">Info</span>
</label>
<label class="inline-flex">
<input type="checkbox" class="form-checkbox outline-dark rounded-full peer" />
<span class="peer-checked:text-dark">Dark</span>
</label>
Radio
Default
Code
<!-- radio -->
<label class="inline-flex">
<input type="radio" name="default_radio" class="form-radio" checked />
<span>Primary</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_radio" class="form-radio text-success" />
<span>Success</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_radio" class="form-radio text-secondary" />
<span>Secondary</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_radio" class="form-radio text-danger" />
<span>Danger</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_radio" class="form-radio text-warning" />
<span>Warning</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_radio" class="form-radio text-info" />
<span>Info</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_radio" class="form-radio text-dark" />
<span>Dark</span>
</label>
Square
Code
<!-- square -->
<label class="inline-flex">
<input type="radio" name="square_radio" class="form-radio rounded-none" checked />
<span>Primary</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_radio" class="form-radio text-success rounded-none" />
<span>Success</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_radio" class="form-radio text-secondary rounded-none" />
<span>Secondary</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_radio" class="form-radio text-danger rounded-none" />
<span>Danger</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_radio" class="form-radio text-warning rounded-none" />
<span>Warning</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_radio" class="form-radio text-info rounded-none" />
<span>Info</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_radio" class="form-radio text-dark rounded-none" />
<span>Dark</span>
</label>
Outline
Code
<!-- classic -->
<label class="inline-flex">
<input type="radio" name="outline_radio" class="form-radio outline-primary" checked />
<span>Primary</span>
</label>
<label class="inline-flex">
<input type="radio" name="outline_radio" class="form-radio outline-success" />
<span>Success</span>
</label>
<label class="inline-flex">
<input type="radio" name="outline_radio" class="form-radio outline-secondary" />
<span>Secondary</span>
</label>
<label class="inline-flex">
<input type="radio" name="outline_radio" class="form-radio outline-danger" />
<span>Danger</span>
</label>
<label class="inline-flex">
<input type="radio" name="outline_radio" class="form-radio outline-warning" />
<span>Warning</span>
</label>
<label class="inline-flex">
<input type="radio" name="outline_radio" class="form-radio outline-info" />
<span>Info</span>
</label>
<label class="inline-flex">
<input type="radio" name="outline_radio" class="form-radio outline-dark" />
<span>Dark</span>
</label>
Default Text Color
Code
<!-- default text color -->
<label class="inline-flex">
<input type="radio" name="default_text_color" class="form-radio peer" checked />
<span class="peer-checked:text-primary">Primary</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_text_color" class="form-radio text-success peer" />
<span class="peer-checked:text-success">Success</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_text_color" class="form-radio text-secondary peer" />
<span class="peer-checked:text-secondary">Secondary</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_text_color" class="form-radio text-danger peer" />
<span class="peer-checked:text-danger">Danger</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_text_color" class="form-radio text-warning peer" />
<span class="peer-checked:text-warning">Warning</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_text_color" class="form-radio text-info peer" />
<span class="peer-checked:text-info">Info</span>
</label>
<label class="inline-flex">
<input type="radio" name="default_text_color" class="form-radio text-dark peer" />
<span class="peer-checked:text-dark">Dark</span>
</label>
Square Text Color
Code
<!-- square text color -->
<label class="inline-flex">
<input type="radio" name="square_text_radio" class="form-radio rounded-none peer" checked />
<span class="peer-checked:text-primary">Primary</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_text_radio" class="form-radio text-success rounded-none peer" />
<span class="peer-checked:text-success">Success</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_text_radio" class="form-radio text-secondary rounded-none peer" />
<span class="peer-checked:text-secondary">Secondary</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_text_radio" class="form-radio text-danger rounded-none peer" />
<span class="peer-checked:text-danger">Danger</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_text_radio" class="form-radio text-warning rounded-none peer" />
<span class="peer-checked:text-warning">Warning</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_text_radio" class="form-radio text-info rounded-none peer" />
<span class="peer-checked:text-info">Info</span>
</label>
<label class="inline-flex">
<input type="radio" name="square_text_radio" class="form-radio text-dark rounded-none peer" />
<span class="peer-checked:text-dark">Dark</span>
</label>
Outline Text Color
Code
<!-- classic text color -->
<label class="inline-flex">
<input type="radio" name="classic_text_radio" class="form-radio outline-primary peer" checked />
<span class="peer-checked:text-primary">Primary</span>
</label>
<label class="inline-flex">
<input type="radio" name="classic_text_radio" class="form-radio outline-success peer" />
<span class="peer-checked:text-success">Success</span>
</label>
<label class="inline-flex">
<input type="radio" name="classic_text_radio" class="form-radio outline-secondary peer" />
<span class="peer-checked:text-secondary">Secondary</span>
</label>
<label class="inline-flex">
<input type="radio" name="classic_text_radio" class="form-radio outline-danger peer" />
<span class="peer-checked:text-danger">Danger</span>
</label>
<label class="inline-flex">
<input type="radio" name="classic_text_radio" class="form-radio outline-warning peer" />
<span class="peer-checked:text-warning">Warning</span>
</label>
<label class="inline-flex">
<input type="radio" name="classic_text_radio" class="form-radio outline-info peer" />
<span class="peer-checked:text-info">Info</span>
</label>
<label class="inline-flex">
<input type="radio" name="classic_text_radio" class="form-radio outline-dark peer" />
<span class="peer-checked:text-dark">Dark</span>
</label>
© . Vristo All rights reserved.