Vue

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.

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.

Playground