@psff/cmp-radiobutton

@psff/cmp-radiobutton psff-radiobutton

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

Getting started

• Setup the package as a dependencie.

  yarn add @psff/cmp-radiobutton
  

• 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)