Switch
Preview
Source code
html
<h-switch id="switch" :disabled="state.disabled" />
<h-switch id="with-icon" :disabled="state.disabled">
<template #on><mdi-check /></template>
<template #off><mdi-close /></template>
</h-switch><h-switch id="switch" :disabled="state.disabled" />
<h-switch id="with-icon" :disabled="state.disabled">
<template #on><mdi-check /></template>
<template #off><mdi-close /></template>
</h-switch>A switch for single-option items. See the Material 3 documentation on this component.
Props
ts
defineProps<{
// The ID to use on the input.
id: string
// Whether the switch is disabled or not.
disabled?: boolean
// Allows you to use this as though it were a regular `<input type="checkbox" />`
modelValue?: boolean
}>()defineProps<{
// The ID to use on the input.
id: string
// Whether the switch is disabled or not.
disabled?: boolean
// Allows you to use this as though it were a regular `<input type="checkbox" />`
modelValue?: boolean
}>()Slots
on
The icon to use when the switch is on.
off
The icon to use when the switch is off.