Switch

LhSwitch is used for switching between two states.

Basic Usage

Basic Usage

<script setup lang="ts">
import { ref } from 'vue'
import { LhSwitch } from '@lh-ui/vue3'

const status = ref(false)
</script>

<template>
  <LhSwitch v-model="status" />
</template>

<script>
import { LhSwitch } from '@lh-ui/vue3'

export default {
  components: { LhSwitch },
  data() {
    return {
      status: false,
    }
  },
}
</script>

<template>
  <LhSwitch v-model="status" />
</template>

Size

Size

<script setup lang="ts">
import { ref } from 'vue'
import { LhSwitch } from '@lh-ui/vue3'

const smallVal = ref(false)
const mediumVal = ref(false)
const largeVal = ref(false)
</script>

<template>
  <LhSwitch v-model="smallVal" size="small" />
  <LhSwitch v-model="mediumVal" size="medium" />
  <LhSwitch v-model="largeVal" size="large" />
</template>

<script>
import { LhSwitch } from '@lh-ui/vue3'

export default {
  components: { LhSwitch },
  data() {
    return {
      smallVal: false,
      mediumVal: false,
      largeVal: false,
    }
  },
}
</script>

<template>
  <LhSwitch v-model="smallVal" size="small" />
  <LhSwitch v-model="mediumVal" size="medium" />
  <LhSwitch v-model="largeVal" size="large" />
</template>

Disabled & Loading

Disabled & Loading

<script setup lang="ts">
import { ref } from 'vue'
import { LhSwitch } from '@lh-ui/vue3'

const disabledVal = ref(true)
const loadingVal = ref(true)
</script>

<template>
  <LhSwitch v-model="disabledVal" disabled />
  <LhSwitch v-model="loadingVal" loading />
</template>

<script>
import { LhSwitch } from '@lh-ui/vue3'

export default {
  components: { LhSwitch },
  data() {
    return {
      disabledVal: true,
      loadingVal: true,
    }
  },
}
</script>

<template>
  <LhSwitch v-model="disabledVal" disabled />
  <LhSwitch v-model="loadingVal" loading />
</template>

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/switch/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhSwitchProps

export interface LhSwitchProps {
  modelValue?: boolean
  disabled?: boolean
  loading?: boolean
  name?: string
  size?: LhComponentSize
  activeText?: string
  inactiveText?: string
  sx?: LhSxProps
}

LhSwitchSize

export type LhSwitchSize = LhComponentSize

LhComponentSize _{(from @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

Custom Theme

Switches can apply custom theme colors.

Celadon Theme

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhSwitch } from '@lh-ui/vue3'

const status = ref(false)
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <!-- Celadon theme -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSwitch v-model="status" />
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhSwitch } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSwitch },
  data() {
    return {
      status: false,
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <!-- Celadon theme -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSwitch v-model="status" />
  </LhConfigProvider>
</template>

Internationalization

Configure the global locale pack via LhConfigProvider.

Internationalization

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSwitch, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
const status = ref(false)
</script>

<template>
  <!-- Locale configuration -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      Switch Language
    </LhButton>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhSwitch, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSwitch, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      status: false,
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <!-- Locale configuration -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      Switch Language
    </LhButton>
  </LhConfigProvider>
</template>

Native name and text labels

name sets the native input name (for form submission); active-text / inactive-text show labels on each side.

name / texts

On

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(false)
const value2 = ref(true)
</script>

<template>
  <LhSwitch v-model="value" name="notifications" />
  <LhSwitch v-model="value2" active-text="On" inactive-text="Off" />
</template>

<script>
export default {
  data() {
    return { value: false, value2: true }
  },
}
</script>

<template>
  <LhSwitch v-model="value" name="notifications" />
  <LhSwitch v-model="value2" active-text="On" inactive-text="Off" />
</template>

API

Props

Prop	Description	Type	Default
modelValue	Current state	boolean	false
disabled	Disabled	boolean	false
loading	Loading state	boolean	false
name	Native form name	string	''
size	Size	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
activeText	Text when on	string	''
inactiveText	Text when off	string	''
sx	sx quick-layout props	LhSxProps	—

Events

Event	Description	Callback
update:modelValue	State changed	(value: boolean)
change	State changed	(value: boolean)

Emits update:modelValue (new boolean value) and change events. Supports keyboard Enter and Space to toggle.