Switch

Switch is used for switching between two opposing states.

Basic Usage

The inputs have themes: default, transparent.

Label

<template>
  <div class="flex flex-col">
    <HcSwitch
      v-model="value1"
      label="Label"
    />

    <HcSwitch
      v-model="value2"
      label="Label"
      class="mt-5"
      label-position="right"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcSwitch } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(true);
const value2 = ref(true);
</script>

Disabled & readonly

Change the state of the component to disabled with the disabled property, the property is a boolean so you can add it without any value.

Change the state of the component to readonly with the readonly property.

Label

<template>
  <div class="flex flex-col">
    <HcSwitch
      v-model="value1"
      label="Label"
      disabled
    />

    <HcSwitch
      v-model="value2"
      label="Label"
      class="mt-5"
      readonly
    />
  </div>
</template>

<script lang="ts" setup>
import { HcSwitch } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(true);
const value2 = ref(true);
</script>

Errors

Use props errorMsg to show error message and error state of the component

Label

This field is required

<template>
  <div class="flex flex-col">
    <HcSwitch
      v-model="value1"
      label="Label"
      class="mt-5"
      :error-msg="!value1 ? 'This field is required' : ''"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcSwitch } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(false);
</script>

Props

Property	Type	Values	Description	Default
modelValue	Boolean	Boolean	binding value	false
label	String	String	label text
disabled	Boolean	Boolean	whether component is disabled	false
readonly	Boolean	Boolean	whether component is read only	false
errorMsg	String	String	error message
labelPosition	String	String	left,right	left

Slots

Property	Type	Values	Description	Default
label		-	Customize label content

Events

Property	Type	Values	Description	Default
update:model-value	Function	value - boolean	triggers when value changes
change	Function	value - boolean	triggers when value changes

Switch #

Basic Usage #

Disabled & readonly #

Errors #

Props #

Slots #

Events #

Switch

Basic Usage

Disabled & readonly

Errors

Props

Slots

Events