Switch

Toggle one persistent setting with an immediate state change.

Usage

Notifications

Toggle deployment notifications with one immediate action.

<!-- Switch / Off -->
<script setup lang="ts">
import { ref } from 'vue'
import { SwitchRoot, SwitchThumb } from '@sectile/vue/switch'

const enabled = ref(false)
</script>

<template>
  <SwitchRoot v-model="enabled">
    <span>Deployment notifications</span>
    <SwitchThumb />
  </SwitchRoot>
</template>

On

Start on and expose the active state without changing the control label.

<!-- Switch / On -->
<script setup lang="ts">
import { ref } from 'vue'
import { SwitchRoot, SwitchThumb } from '@sectile/vue/switch'

const enabled = ref(false)
</script>

<template>
  <SwitchRoot v-model="enabled">
    <span>Deployment notifications</span>
    <SwitchThumb />
  </SwitchRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

<!-- Switch / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { SwitchRoot, SwitchThumb } from '@sectile/vue/switch'

const enabled = ref(false)
</script>

<template>
  <SwitchRoot v-model="enabled">
    <span>Deployment notifications</span>
    <SwitchThumb />
  </SwitchRoot>
</template>

API

Vue package: @sectile/vue/switch

Components

SwitchRoot
SwitchThumb

Props

`SwitchRootProps`

as: TypePrimitiveAsDefault'button'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
defaultValue: TypebooleanDefaultfalse
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
form: TypestringDefaultundefined
ID of the native form associated with the control.
modelValue: TypebooleanDefaultundefined
Current value when state is controlled by the parent.
name: TypestringDefaultundefined
Name used for native form submission.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
required: TypebooleanDefaultfalse
Whether the control must contain a valid value before submission.
value: TypestringDefault'on'
Current value exposed by this contract.

`SwitchThumbProps`

as: TypePrimitiveAsDefault'span'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`SwitchSlotProps`

checked: Typeboolean
Whether the control is checked.
disabled: Typeboolean
Whether interaction is unavailable.
readonly: Typeboolean
Whether the value can be inspected but not changed.

Events

`SwitchRoot`

update:modelValue: Payloadboolean
Emitted when the component requests a new controlled value.

Other types

`SwitchValueChangeHandler`

type SwitchValueChangeHandler = (value: boolean) => void

Parts

Shared scope: [data-scope="switch"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`thumb`	`[data-part="thumb"]`	Controls one value along the track.	—

Keyboard interaction

Key	Behavior
`Space`	Toggle the current value.
`Tab`	Move through the normal document focus order.

Accessibility

The root exposes switch semantics and keeps checked, disabled, and readonly states distinct.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Switch ​

Usage ​

Notifications ​

On ​

Controlled ​

API ​

Props ​

SwitchRootProps ​

SwitchThumbProps ​

Slots ​

SwitchSlotProps ​

Events ​

SwitchRoot ​

Other types ​

SwitchValueChangeHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​