Vue
SfCheckbox
is a wrapper around <input type="checkbox">
with additional styles for different states . It can be used for forms or expressing consents.
The root element is an <input>
so any attributes that can be used on an <input>
can be used on SfCheckbox
.
Examples
Checkbox without label
You can use v-model
with SfCheckbox
to bind the value to a variable in your component.
Checkbox aligned to the left
When using SfCheckbox
with a label, you can use Tailwind's peer
modifiers to control the styles of the label based on the state of the checkbox.
Checkbox aligned to the right
Accessibility notes
SfCheckbox
is a wrapper for <input type="checkbox">
so it inherits all the accessibility features of the native checkbox.
It's focusable and can be toggled with Space
.