@psff/cmp-checkbox NPM

Checkbox input `<psff-checkbox>`

A wrapper for checkbox elements. A checkbox allows two states and allow multiple checkbox boxes to be checked.

Getting started

Setup the package as a dependency.
```
yarn add @psff/cmp-checkbox
```

Use the component <psff-checkbox />.

Lonely checkbox

import PsffCheckbox from '@psff/cmp-checkbox'

@Component({
  components: {
    'psff-checkbox': PsffCheckbox,
  },
})
export default class MyComponent extends Vue {
  public hadFun: boolean;
}

/* If you want to personalize style */
.my-checkbox {
  --psff-checkbox-input-background-color: #fabada;
  --psff-checkbox-input-background-color-disabled: #ee12df;
}

<psff-checkbox class="my-checkbox" v-model="hadFun" />
<psff-checkbox class="my-checkbox" v-model="hadFun" switch />

Group of checkboxes

import PsffCheckbox from '@psff/cmp-checkbox'

@Component({
  components: {
    'psff-checkbox': PsffCheckbox,
  },
})
export default class MyComponent extends Vue {
  /* Will change on any check to an array of checked checkboxes values */
  public sports: string[] = [];
}

/* If you want to personalize style */
.my-checkbox {
  --psff-checkbox-input-background-color: #fabada;
  --psff-checkbox-input-background-color-disabled: #ee12df;
  --psff-checkbox-input-tick-width: 2px;
}

<psff-checkbox
  class="my-checkbox"
  label="Football"
  value="football"
  v-model="sports" />
<psff-checkbox
  class="my-checkbox"
  label="Volleyball"
  value="volleyball"
  v-model="sports" />
<psff-checkbox
  class="my-checkbox"
  label="Tennis"
  value="tennis"
  v-model="sports" />

Specifications

Component `<psff-checkbox />`

This component render a checkbox.

Properties:

Extend <input> parameters with:

label (string): to show a label for the radio input.
value (any, default: false): the value when is checked.
modelValue (any): value to infer checkbox state. Boolean when is a lonely checkbox or an array when it is used within a group.
switch (boolean, default: false): if show the input with a switch appearance instead of a standard checkbox.

Events:

change (value: true|false|any[]): new value after user interaction.

Custom propperties:

Generic:
- --psff-checkbox-input-background-color (default #fff)
- --psff-checkbox-input-border-color (default #b8cbfd) *on switch mode will be the handler color when not checked
- --psff-checkbox-input-border-color-checked (default #5e88fc)
- --psff-checkbox-input-border-radius (default .25rem)
- --psff-checkbox-input-border-size (default .125rem)
- --psff-checkbox-input-size (default 1.5rem) *on switch mode will be the height; width will be the double
- --psff-checkbox-input-tick-color (default #5e88fc)
- --psff-checkbox-input-tick-scale (default 1)
- --psff-checkbox-input-tick-width (default .19rem)
- --psff-checkbox-label-color (default #000)
- --psff-checkbox-label-margin (default 1rem)
- --psff-checkbox-font-family (default inherit)
- --psff-checkbox-font-size (default inherit)
- --psff-checkbox-font-style (default inherit)
- --psff-checkbox-font-weight (default inherit)
Disabled (for clickable checkbox):
- --psff-checkbox-input-background-color-disabled (default #ede9e5)
- --psff-checkbox-input-border-color-disabled (default #afaeaf)
- --psff-checkbox-input-tick-color-disabled (default #afaeaf)
- --psff-checkbox-label-color-disabled (default #afaeaf)
On hovered (for clickable checkbox):
- --psff-checkbox-input-background-color-hovered (default #fff)
- --psff-checkbox-input-border-color-hovered (default #5e88fc)
- --psff-checkbox-label-color-hovered (default `--psff-checkbox-label-color-hovered)
On focused (for clickable checkbox):
- --psff-checkbox-input-background-color-focused (default #fff)
- --psff-checkbox-input-border-color-focused (default #5e88fc)
- --psff-checkbox-label-color-focused (default `--psff-checkbox-label-color-focused)