# Toggles

# Checkbox

# Introduction

The CpCheckbox component maps to a checkbox input and a label.

TIP

Simple checkbox and checkboxes group can bind checkboxes together thanks to v-model. The group-name props is critical for its use.

# Checkbox states

<cp-checkbox checkbox-label="Checkbox default" group-name="firstCheckbox"/>
<cp-checkbox checkbox-label="Checkbox checked" :value="true" group-name="secondCheckbox" />
<cp-checkbox checkbox-label="Checkbox disabled" :value="false" is-disabled group-name="thirdCheckbox" />
<cp-checkbox checkbox-label="Checkbox checked disabled" :value="true" is-disabled group-name="fourthCheckbox" />

# Values prop structure

The :values prop is an Array filled with Object formatted as follow, with 2 critical keys:

  • value: raw value
  • label: label displayed on the UI

# Checkbox group

Selected fruits: []

<template>
  <div class="checkboxExample">
    <p>Selected fruits: {{ selectedFruits }}</p>
    <cp-checkbox
      v-for="{ label, value, disabled } in fruitsList"
      :key="label"
      v-model="selectedFruits"
      :checkbox-label="label"
      :checkbox-value="value"
      group-name="fruits"
      :is-disabled="disabled"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFruits: [],
      fruitsList: [
        {
          label: '🍊 Orange',
          value: 'orange',
        },
        {
          label: '🍌 Banana',
          value: 'banana',
        },
        {
          label: '🥝 Kiwi',
          value: 'kiwi',
        },
        {
          label: '🍉 Watermelon',
          value: 'watermelon',
          disabled: true,
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.checkboxExample {
  margin-top: 16px;

  > *:not(:last-of-type) {
    margin-bottom: 8px;
  }
}
</style>

# Checkbox size

You can easily change the checkbox size by specifying a custom font-size to the component.

<cp-checkbox checkbox-label="14px sized" group-name="smallCheckbox" style="font-size: 14px" />
<cp-checkbox checkbox-label="16px sized (default)" group-name="defaultCheckbox" />
<cp-checkbox checkbox-label="18px sized" group-name="largeCheckbox" style="font-size: 18px" />

# CpCheckbox Props

# :checkbox-value string

The inherent raw checkbox value, not visible on the UI.

# :checkbox-label string

The checkbox' label.

# :group-name string

It corresponds to the input name attribute, which is critical to link checkbox between them.

# :is-disabled bool = false

When true, the checkbox is disabled.

# :capitalize-label bool = true

When true, the checkbox' label is capitalized.

# Radio

# Introduction

The radio are used for selecting a single option from a list. Begin labels with a capital letter. You can use multiple radio so it forms a Radio group.

TIP

Radio group can bind radios together thanks to v-model. The group-name props is critical for its use.

Radio directly maps to a input element.

# Radio examples

# Simple CpRadio

Selected option: second_value

<template>
  <div>
    <p>Selected option: {{ radioGroupSelectedOption }}</p>
    <cp-radio
      v-for="({ label, value }, index) in radioGroup"
      :key="index"
      v-model="radioGroupSelectedOption"
      :radio-value="value"
      :radio-label="label"
      group-name="cp-radio"
      :is-selected="isRadioSelected(value)"
      :is-disabled="isRadioDisabled(value)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioGroup: [
        {
          value: 'first_value',
          label: 'first label',
        },
        {
          value: 'second_value',
          label: 'second label',
        },
        {
          value: 'third_value',
          label: 'third label',
        },
      ],
      radioGroupSelectedOption: 'second_value',
      radioGroupDisabledOptions: ['second_value'],
    }
  },
  methods: {
    switchState() {
      this.cpSwitchState = !this.cpSwitchState
    },
    isRadioSelected(radioValue) {
      return radioValue === this.radioGroupSelectedOption
    },
    isRadioDisabled(radioValue) {
      return this.radioGroupDisabledOptions.includes(radioValue)
    },
  },
}
</script>

# CpRadio selected with :description & :additional-data

<cp-radio
  radio-value="value"
  radio-label="label"
  radio-description="dimensions"
  additional-data="additional data"
  group-name="cp-radio"
  :is-selected="true"
  :is-disabled="false"
/>

# Values prop structure

The :values prop is an Array filled with Object formatted as follow, with 2 critical keys:

  • value: raw value
  • label: label displayed on the UI

# CpRadio disabled with :additional-data only

<cp-radio
  radio-value="value"
  radio-label="Label"
  additional-data="Additional data"
  group-name="cp-radio"
  :is-selected="true"
  :is-disabled="true"
/>

# CpRadio Props

# :radio-value string

The inherent raw radio value, not visible on the UI.

# :radio-label string

The main label, on the left. It's capitalize by default.

# :radio-description string

The radio description, which is the central part.

# :additional-data string

An available element to display additional data, on the right.

# :is-selected bool = false

It returns whether the radio is selected or not.

# :is-disabled bool = false

It returns whether the radio is disabled or not. NB: a radio can be selected & disabled at the same time.

# :group-name string

It corresponds to the input name attribute, which is critical to link radios between them.

# Switch

# Introduction

The Switch component is used as an alternative for a Checkbox. Except indeterminate and label are not supported.

TIP

You can use the CpSwitch with v-model.

# Switch states

  <cp-switch :value="true" /> 
  <cp-switch :value="false" /> 
  <cp-switch :value="false" disabled /> 
  <cp-switch :value="true" disabled /> 

# Simple switch

Switch state: true

<template>
  <div>
    <p>Switch state: {{ cpSwitchState }}</p>
    <cp-switch v-model="cpSwitchState" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      cpSwitchState: true,
    }
  },
}
</script>

# Sizes

It's possible to change the CpSwitch size, using :base-height props and an arbitrary number. It's better to use multiple of 8 so the design system keeps its consistency.

  <cp-switch :base-height="16" :value="true" />
  <cp-switch :base-height="24" :value="true" />
  <cp-switch :base-height="32" :value="true" />

# CpSwitch Props

# :value bool

The switch value, whether it's active or not.

# :base-height number

The switch value, whether it's active or not.

# :is-disabled bool = false

When true, the switch is disabled.