@nextcloud/vue

Appearance

Return to top
On this page

NcCheckboxRadioSwitch

Props

Prop nameDescriptionTypeValuesDefault
idUnique id attribute of the inputstring-() => 'checkbox-radio-switch-' + GenRandomId()
nameInput name. Required for radio, optional for checkboxstring-null
typeType of the input. checkbox, radio or switchstring-'checkbox'
buttonVariantToggle the alternative button styleboolean-false
buttonVariantGroupedAre the elements are all direct siblings?
If so they will be grouped horizontally or vertically
Possible values are no, horizontal, vertical.		stringno, vertical, horizontal'no'
checkedChecked state. To be used with :value.syncboolean|array|string-false
valueValue to be synced on checkstring-null
disabledDisabled stateboolean-false
indeterminateIndeterminate stateboolean-false
loadingLoading stateboolean-false
wrapperElementWrapping element tagstring-'span'

Events

Event namePropertiesDescription
update:checked

Slots

NameDescriptionBindings
defaultThe checkbox/radio label

General description

This is a simple input checkbox, radio and switch design. Please have a look at proper usage and recommendations: https://material.io/components/checkboxes

Standard checkbox

vue
<template>
  <div>
    <NcCheckboxRadioSwitch :checked.sync="sharingEnabled"
      >Enable sharing</NcCheckboxRadioSwitch
    >
    <NcCheckboxRadioSwitch :checked.sync="sharingEnabled" :disabled="true"
      >Enable sharing (disabled)</NcCheckboxRadioSwitch
    >
    <NcCheckboxRadioSwitch
      :checked="sharingEnabled"
      :loading="loading"
      @update:checked="onToggle"
      >Enable sharing (with request loading)</NcCheckboxRadioSwitch
    >
    <br />
    sharingEnabled: {{ sharingEnabled }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      sharingEnabled: false
    };
  },
  methods: {
    onToggle() {
      this.loading = true;

      setTimeout(() => {
        this.sharingEnabled = !this.sharingEnabled;
        this.loading = false;
      }, 1000);
    }
  }
};
</script>

Standard radio set

vue
<template>
  <div>
    <NcCheckboxRadioSwitch
      :checked.sync="sharingPermission"
      value="r"
      name="sharing_permission_radio"
      type="radio"
      >Default permission read</NcCheckboxRadioSwitch
    >
    <NcCheckboxRadioSwitch
      :checked.sync="sharingPermission"
      value="rw"
      name="sharing_permission_radio"
      type="radio"
      >Default permission read+write</NcCheckboxRadioSwitch
    >
    <br />
    sharingPermission: {{ sharingPermission }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      sharingPermission: "r"
    };
  }
};
</script>

Standard radio set with alternative button style

vue
<template>
  <div>
    <NcCheckboxRadioSwitch
      :checked.sync="sharingPermission"
      value="r"
      name="sharing_permission_radio"
      type="radio"
      :button-variant="true"
      button-variant-grouped="vertical"
      >Default permission read</NcCheckboxRadioSwitch
    >
    <NcCheckboxRadioSwitch
      :checked.sync="sharingPermission"
      value="rw"
      name="sharing_permission_radio"
      type="radio"
      :button-variant="true"
      button-variant-grouped="vertical"
      >Default permission read+write</NcCheckboxRadioSwitch
    >
    <br />
    sharingPermission: {{ sharingPermission }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      sharingPermission: "r"
    };
  }
};
</script>

Standard checkbox set

vue
<template>
  <div>
    <NcCheckboxRadioSwitch
      :disabled="true"
      :checked.sync="sharingPermission"
      value="r"
      name="sharing_permission"
      >Permission read</NcCheckboxRadioSwitch
    >
    <NcCheckboxRadioSwitch
      :checked.sync="sharingPermission"
      value="w"
      name="sharing_permission"
      >Permission write</NcCheckboxRadioSwitch
    >
    <NcCheckboxRadioSwitch
      :checked.sync="sharingPermission"
      value="d"
      name="sharing_permission"
      >Permission delete</NcCheckboxRadioSwitch
    >
    <br />
    sharingPermission: {{ sharingPermission }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      sharingPermission: ["r", "d"]
    };
  }
};
</script>

Standard switch

vue
<template>
  <div>
    <NcCheckboxRadioSwitch :checked.sync="sharingEnabled" type="switch"
      >Enable sharing</NcCheckboxRadioSwitch
    >
    <NcCheckboxRadioSwitch
      :checked.sync="sharingEnabled"
      type="switch"
      :disabled="true"
      >Enable sharing (disabled)</NcCheckboxRadioSwitch
    >
    <br />
    sharingEnabled: {{ sharingEnabled }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      sharingEnabled: true
    };
  }
};
</script>