Switch

#Basic usage

Dissolve overlaysShow hairlinesReduced motion

switch/basic.vue

<script setup lang="ts">
import { Switch } from "@bysages/vue";
</script>

<template>
  <div class="grid gap-3 w-full">
    <Switch.Root default-checked>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Dissolve overlays</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
    <Switch.Root>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Show hairlines</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
    <Switch.Root default-checked disabled>
      <Switch.Control>
        <Switch.Thumb />
      </Switch.Control>
      <Switch.Label>Reduced motion</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  </div>
</template>

#Props

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung for the thumb; the track travels with it.
`checked`	`boolean`		The controlled checked state of the switch
`defaultChecked`	`boolean`		The initial checked state of the switch when rendered. Use when you don't need to control the checked state of the switch.
`disabled`	`boolean`		Whether the switch is disabled.
`form`	`string`		The id of the form that the switch belongs to
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }>`		The ids of the elements in the switch. Useful for composition.
`invalid`	`boolean`		If `true`, the switch is marked as invalid.
`label`	`string`		Specifies the localized strings that identifies the accessibility elements and their states
`name`	`string`		The name of the input field in a switch (Useful for form submission).
`readOnly`	`boolean`		Whether the switch is read-only
`required`	`boolean`		If `true`, the switch input is marked as required,
`value`	`string`	`"on"`	The value of checkbox input. Useful for form submission.

#Thumb

A styled part — no props of its own; it takes the anatomy's shared styling.