@psff/cmp-radiobutton v1.0.3

@psff/cmp-radiobutton psff-radiobutton

Radiobuttons are compact elements that allow users to select one option or filter content.

Getting started

1. Setup the package as a dependencie.

   yarn add @psff/cmp-radiobutton

2. Use the component <psff-radiobutton />.

   import PsffRadioButton from '@psff/cmp-radiobutton'
   
   @Component({
     components: {
       'psff-radiobutton': PsffRadioButton,
     },
   })
   export default class MyComponent extends Vue {
     public choice: number;
   }

   .my-radiobutton {
     --psff-radiobutton-input-border-color: #fabada;
     --psff-radiobutton-label-color: black;
   }

   <psff-radiobutton
     class="my-radiobutton"
     name="best-food"
     :label="#1 Milk"
     :value="1"
     v-model="choice" />
   <psff-radiobutton
     class="my-radiobutton"
     name="best-food"
     :label="#2 Bread"
     :value="2"
     v-model="choice" />
   <psff-radiobutton
     class="my-radiobutton"
     name="best-food"
     :label="#3 Sugar"
     :value="3"
     v-model="choice" />

Specifications

Parameters:

• label (string): text to show beside the radiobutton.
• name (string, required): radiobuttons group identifier.
• value (any, required): the value represented by the radiobutton.
• modelValue (any): the selected value of the radiobuttons group.

Events

• change (value: any): the value of the selected radio by the user.

Custom propperties:

• Generic:

  • --psff-radiobutton-input-background-color (default #fff)
  • --psff-radiobutton-input-border-color (default #5e88fc)
  • --psff-radiobutton-input-border-size (default 2px)
  • --psff-radiobutton-input-dot-color (default #5e88fc)
  • --psff-radiobutton-input-padding (default 2px)
  • --psff-radiobutton-input-size (default 1rem)
  • --psff-radiobutton-label-color (default #000)
  • --psff-radiobutton-label-margin (default 1rem)
  • --psff-radiobutton-font-family (default inherit)
  • --psff-radiobutton-font-size (default inherit)
  • --psff-radiobutton-font-weight (default inherit)
  • --psff-radiobutton-line-height (default inherit)

• Disabled:

  • --psff-radiobutton-input-background-color-disabled (default #afaeaf)
  • --psff-radiobutton-input-border-color-disabled (default #afaeaf)
  • --psff-radiobutton-input-dot-color-disabled (default #afaeaf)
  • --psff-radiobutton-label-color-disabled (default #afaeaf)

• On hovered:

  • --psff-radiobutton-input-background-color-hovered (default #fff)
  • --psff-radiobutton-input-border-color-hovered (default #5e88fc)
  • --psff-radiobutton-input-dot-color-hovered (default #5e88fc)
  • --psff-radiobutton-label-color-hovered (default var(--psff-radiobutton-label-color))

• On focused:

  • --psff-radiobutton-input-background-color-focused (default #fff)
  • --psff-radiobutton-input-border-color-focused (default #5e88fc)
  • --psff-radiobutton-input-dot-color-focused (default #5e88fc)
  • --psff-radiobutton-input-shadow-focused (default 0 0 2px 2px #97b3fc)
  • --psff-radiobutton-label-color-focused (default var(--psff-radiobutton-label-color))

• On cheched:

  • --psff-radiobutton-input-background-color-checked (default #fff)
  • --psff-radiobutton-input-border-color-checked (default #5e88fc)