Checkbox
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.
If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about required form fields in our guide here.
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.