# Checkbox

Checkbox component

# Most common usage scenario

<template>
  <SfCheckbox
    v-model="checked"
    :name="name"
    :label="label"
    :required="required"
    :disabled="disabled"
    :valid="valid"
  />
</template>
<script>
import { SfCheckbox } from "@storefront-ui/vue";
export default {
  components: {
    SfCheckbox,
  },
  data() {
    return {
      checked: false,
      name: "shipping",
      label: "I want to create an account",
      required: false,
      valid: true,
      disabled: false,
    };
  },
};
</script>

# Props

  • name

    • type: string
    • defaultValue: ""
  • value

    • type: string|boolean
    • defaultValue: ""
  • label

    • type: string
    • defaultValue: ""
  • required

    • type: boolean
    • defaultValue: false
  • disabled

    • type: boolean
    • defaultValue: false
  • valid

    • type: boolean
    • defaultValue: true
  • selected

    • type: array|boolean
    • defaultValue: () => []

# Slots

  • checkmark

    • Custom check mark markup
    • bindings: isChecked, disabled
  • label

    • Custom label markup
    • bindings: label, isChecked, disabled

# Events

  • change

# CSS modifiers

  • .sf-checkbox--has-error
  • .sf-checkbox--is-disabled
  • .sf-checkbox--is-active

# CSS custom properties (variables)

# Overridden other components CSS variables

  • --checkbox-border-color
  • --checkbox-background
  • --checkbox-label-color

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.