previously Vue Storefront Build Better Storefronts

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.

Playground