1.22.2
Back to components
Components

Switch

Standalone switch control for capturing boolean input, usable independently or within custom form layouts.

Component

Props

Props Required Default Type
idtrue — string
modelValue — falseboolean
disabled — falseboolean
size — ControlFieldSize.MDControlFieldSize
styleType — SwitchStyle.BRANDSwitchStyle

Usage

id

Sets the id of the underlying native checkbox input.

 <template>
    <Switch id="my-switch" />
</template>
  • Type: string
  • Required: true

modelValue

Controls the checked state of the switch. Use v-model for two-way binding.

 <template>
    <Switch id="my-switch" v-model="isEnabled" />
</template>
<script setup lang="ts">
const isEnabled = ref(false)
</script>
  • Type: boolean
  • Default: false

disabled

Sets the disabled state of the switch. When disabled, clicks are ignored and the switch appearance reflects the inactive state.

 <template>
    <Switch id="my-switch" disabled />
</template>
  • Type: boolean
  • Default: false

size

Sets the size of the switch. It uses the ControlFieldSize enum.

 <template>
    <Switch id="my-switch" :size="ControlFieldSize.LG" />
</template>
  • Type: ControlFieldSize
  • Default: ControlFieldSize.MD

Options

Value Description
XS

Extra Small

SM

Small

MD

Medium

LG

Large

styleType

Sets the style type of the switch. It uses the SwitchStyle enum.

 <template>
    <Switch id="my-switch" :styleType="SwitchStyle.SUCCESS" />
</template>
  • Type: SwitchStyle
  • Default: SwitchStyle.BRAND

Options

Value Description
BRAND

Uses the primary brand color for the background when the switch is on.

SUCCESS

Uses the success color for the background when the switch is on.