# Switch (SVELTE)



## Anatomy



```tsx
<Switch.Root>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label />
  <Switch.HiddenInput />
</Switch.Root>
```

## Examples

**Example: basic**

#### React

```tsx
import { Switch } from '@ark-ui/react/switch'
import styles from 'styles/switch.module.css'

export const Basic = () => (
  <Switch.Root className={styles.Root}>
    <Switch.Control className={styles.Control}>
      <Switch.Thumb className={styles.Thumb} />
    </Switch.Control>
    <Switch.Label className={styles.Label}>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
)

```

#### Solid

```tsx
import { Switch } from '@ark-ui/solid/switch'
import styles from 'styles/switch.module.css'

export const Basic = () => (
  <Switch.Root class={styles.Root}>
    <Switch.Control class={styles.Control}>
      <Switch.Thumb class={styles.Thumb} />
    </Switch.Control>
    <Switch.Label class={styles.Label}>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Switch } from '@ark-ui/vue/switch'
import styles from 'styles/switch.module.css'
</script>

<template>
  <Switch.Root :class="styles.Root">
    <Switch.Control :class="styles.Control">
      <Switch.Thumb :class="styles.Thumb" />
    </Switch.Control>
    <Switch.Label :class="styles.Label">Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Switch } from '@ark-ui/svelte/switch'
  import styles from 'styles/switch.module.css'
</script>

<Switch.Root class={styles.Root}>
  <Switch.Control class={styles.Control}>
    <Switch.Thumb class={styles.Thumb} />
  </Switch.Control>
  <Switch.Label class={styles.Label}>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>

```

### Controlled

For a controlled Switch component, the state of the toggle is managed using the checked prop, and updates when the
`onCheckedChange` event handler is called:

**Example: controlled**

#### React

```tsx
import { Switch } from '@ark-ui/react/switch'
import { useState } from 'react'
import styles from 'styles/switch.module.css'

export const Controlled = () => {
  const [checked, setChecked] = useState(false)

  return (
    <Switch.Root className={styles.Root} checked={checked} onCheckedChange={(e) => setChecked(e.checked)}>
      <Switch.Control className={styles.Control}>
        <Switch.Thumb className={styles.Thumb} />
      </Switch.Control>
      <Switch.Label className={styles.Label}>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

```

#### Solid

```tsx
import { Switch } from '@ark-ui/solid/switch'
import { createSignal } from 'solid-js'
import styles from 'styles/switch.module.css'

export const Controlled = () => {
  const [checked, setChecked] = createSignal(false)

  return (
    <Switch.Root class={styles.Root} checked={checked()} onCheckedChange={(e) => setChecked(e.checked)}>
      <Switch.Control class={styles.Control}>
        <Switch.Thumb class={styles.Thumb} />
      </Switch.Control>
      <Switch.Label class={styles.Label}>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Switch } from '@ark-ui/vue/switch'
import { ref } from 'vue'
import styles from 'styles/switch.module.css'

const checked = ref(false)
</script>

<template>
  <Switch.Root :class="styles.Root" v-model:checked="checked">
    <Switch.Control :class="styles.Control">
      <Switch.Thumb :class="styles.Thumb" />
    </Switch.Control>
    <Switch.Label :class="styles.Label">Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Switch } from '@ark-ui/svelte/switch'
  import styles from 'styles/switch.module.css'

  let checked = $state(false)
</script>

<Switch.Root class={styles.Root} bind:checked>
  <Switch.Control class={styles.Control}>
    <Switch.Thumb class={styles.Thumb} />
  </Switch.Control>
  <Switch.Label class={styles.Label}>Label</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>

```

### Root Provider

An alternative way to control the switch is to use the `RootProvider` component and the `useSwitch` hook. This way you
can access the state and methods from outside the component.

**Example: root-provider**

#### React

```tsx
import { Switch, useSwitch } from '@ark-ui/react/switch'
import button from 'styles/button.module.css'
import styles from 'styles/switch.module.css'

export const RootProvider = () => {
  const _switch = useSwitch()

  return (
    <div className="stack">
      <button className={button.Root} onClick={() => _switch.toggleChecked()}>
        Toggle
      </button>

      <Switch.RootProvider className={styles.Root} value={_switch}>
        <Switch.Control className={styles.Control}>
          <Switch.Thumb className={styles.Thumb} />
        </Switch.Control>
        <Switch.Label className={styles.Label}>Label</Switch.Label>
        <Switch.HiddenInput />
      </Switch.RootProvider>
    </div>
  )
}

```

#### Solid

```tsx
import { Switch, useSwitch } from '@ark-ui/solid/switch'
import button from 'styles/button.module.css'
import styles from 'styles/switch.module.css'

export const RootProvider = () => {
  const _switch = useSwitch()

  return (
    <div class="stack">
      <button class={button.Root} onClick={() => _switch().toggleChecked()}>
        Toggle
      </button>

      <Switch.RootProvider class={styles.Root} value={_switch}>
        <Switch.Control class={styles.Control}>
          <Switch.Thumb class={styles.Thumb} />
        </Switch.Control>
        <Switch.Label class={styles.Label}>Label</Switch.Label>
        <Switch.HiddenInput />
      </Switch.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Switch, useSwitch } from '@ark-ui/vue/switch'
import button from 'styles/button.module.css'
import styles from 'styles/switch.module.css'

const _switch = useSwitch()
</script>

<template>
  <div class="stack">
    <button :class="button.Root" @click="_switch.toggleChecked()">Toggle</button>

    <Switch.RootProvider :class="styles.Root" :value="_switch">
      <Switch.Control :class="styles.Control">
        <Switch.Thumb :class="styles.Thumb" />
      </Switch.Control>
      <Switch.Label :class="styles.Label">Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Switch, useSwitch } from '@ark-ui/svelte/switch'
  import button from 'styles/button.module.css'
  import styles from 'styles/switch.module.css'

  const id = $props.id()
  const _switch = useSwitch({ id })
</script>

<div class="stack">
  <button class={button.Root} onclick={() => _switch().toggleChecked()}>Toggle</button>

  <Switch.RootProvider class={styles.Root} value={_switch}>
    <Switch.Control class={styles.Control}>
      <Switch.Thumb class={styles.Thumb} />
    </Switch.Control>
    <Switch.Label class={styles.Label}>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.RootProvider>
</div>

```

### Field

The `Field` component helps manage form-related state and accessibility attributes of a switch. It includes handling
ARIA labels, helper text, and error text to ensure proper accessibility.

**Example: with-field**

#### React

```tsx
import { Field } from '@ark-ui/react/field'
import { Switch } from '@ark-ui/react/switch'
import field from 'styles/field.module.css'
import styles from 'styles/switch.module.css'

export const WithField = () => (
  <Field.Root className={field.Root}>
    <Switch.Root className={styles.Root}>
      <Switch.Control className={styles.Control}>
        <Switch.Thumb className={styles.Thumb} />
      </Switch.Control>
      <Switch.Label className={styles.Label}>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
    <Field.HelperText className={field.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText className={field.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'
import { Switch } from '@ark-ui/solid/switch'
import field from 'styles/field.module.css'
import styles from 'styles/switch.module.css'

export const WithField = () => (
  <Field.Root class={field.Root}>
    <Switch.Root class={styles.Root}>
      <Switch.Control class={styles.Control}>
        <Switch.Thumb class={styles.Thumb} />
      </Switch.Control>
      <Switch.Label class={styles.Label}>Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
    <Field.HelperText class={field.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText class={field.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
import { Switch } from '@ark-ui/vue/switch'
import field from 'styles/field.module.css'
import styles from 'styles/switch.module.css'
</script>

<template>
  <Field.Root :class="field.Root">
    <Switch.Root :class="styles.Root">
      <Switch.Control :class="styles.Control">
        <Switch.Thumb :class="styles.Thumb" />
      </Switch.Control>
      <Switch.Label :class="styles.Label">Label</Switch.Label>
      <Switch.HiddenInput />
    </Switch.Root>
    <Field.HelperText :class="field.HelperText">Additional Info</Field.HelperText>
    <Field.ErrorText :class="field.ErrorText">Error Info</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
  import { Switch } from '@ark-ui/svelte/switch'
  import field from 'styles/field.module.css'
  import styles from 'styles/switch.module.css'
</script>

<Field.Root class={field.Root}>
  <Switch.Root class={styles.Root}>
    <Switch.Control class={styles.Control}>
      <Switch.Thumb class={styles.Thumb} />
    </Switch.Control>
    <Switch.Label class={styles.Label}>Label</Switch.Label>
    <Switch.HiddenInput />
  </Switch.Root>
  <Field.HelperText class={field.HelperText}>Additional Info</Field.HelperText>
  <Field.ErrorText class={field.ErrorText}>Error Info</Field.ErrorText>
</Field.Root>

```

### Context

The Switch component allows access to its internal state through the `Context` component. This enables you to
dynamically adjust and customize aspects of the component based on its current state:

**Example: context**

#### React

```tsx
import { Switch } from '@ark-ui/react/switch'
import styles from 'styles/switch.module.css'

export const Context = () => (
  <Switch.Root className={styles.Root}>
    <Switch.Control className={styles.Control}>
      <Switch.Thumb className={styles.Thumb} />
    </Switch.Control>
    <Switch.Context>
      {(context) => (
        <Switch.Label className={styles.Label}>Feature is {context.checked ? 'enabled' : 'disabled'}</Switch.Label>
      )}
    </Switch.Context>
    <Switch.HiddenInput />
  </Switch.Root>
)

```

#### Solid

```tsx
import { Switch } from '@ark-ui/solid/switch'
import styles from 'styles/switch.module.css'

export const Context = () => (
  <Switch.Root class={styles.Root}>
    <Switch.Control class={styles.Control}>
      <Switch.Thumb class={styles.Thumb} />
    </Switch.Control>
    <Switch.Context>
      {(context) => (
        <Switch.Label class={styles.Label}>Feature is {context().checked ? 'enabled' : 'disabled'}</Switch.Label>
      )}
    </Switch.Context>
    <Switch.HiddenInput />
  </Switch.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Switch } from '@ark-ui/vue/switch'
import styles from 'styles/switch.module.css'
</script>

<template>
  <Switch.Root :class="styles.Root">
    <Switch.Control :class="styles.Control">
      <Switch.Thumb :class="styles.Thumb" />
    </Switch.Control>
    <Switch.Context v-slot="api">
      <Switch.Label :class="styles.Label">Feature is {{ api.checked ? 'enabled' : 'disabled' }}</Switch.Label>
    </Switch.Context>
    <Switch.HiddenInput />
  </Switch.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Switch } from '@ark-ui/svelte/switch'
  import styles from 'styles/switch.module.css'
</script>

<Switch.Root class={styles.Root}>
  <Switch.Control class={styles.Control}>
    <Switch.Thumb class={styles.Thumb} />
  </Switch.Control>
  <Switch.Context>
    {#snippet render(context)}
      <Switch.Label class={styles.Label}>Feature is {context().checked ? 'enabled' : 'disabled'}</Switch.Label>
    {/snippet}
  </Switch.Context>
  <Switch.HiddenInput />
</Switch.Root>

```

## Guides

### asChild

The `Switch.Root` element of the switch is a `label` element. This is because the switch is a form control and should be
associated with a label to provide context and meaning to the user. Otherwise, the HTML and accessibility structure will
be invalid.

> If you need to use the `asChild` property, make sure that the `label` element is the direct child of the `Switch.Root`
> component.

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `checked` | `boolean` | No | The controlled checked state of the switch |
| `disabled` | `boolean` | No | Whether the switch is disabled. |
| `ids` | `Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string }>` | No | The ids of the elements in the switch. Useful for composition. |
| `invalid` | `boolean` | No | If `true`, the switch is marked as invalid. |
| `label` | `string` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `name` | `string` | No | The name of the input field in a switch
(Useful for form submission). |
| `onCheckedChange` | `(details: CheckedChangeDetails) => void` | No | Function to call when the switch is clicked. |
| `readOnly` | `boolean` | No | Whether the switch is read-only |
| `required` | `boolean` | No | If `true`, the switch input is marked as required, |
| `value` | `string | number` | No | The value of switch input. Useful for form submission. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSwitchReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `checked` | `boolean` | No | The controlled checked state of the switch |
| `defaultChecked` | `boolean` | No | 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` | No | Whether the switch is disabled. |
| `form` | `string` | No | The id of the form that the switch belongs to |
| `ids` | `Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string }>` | No | The ids of the elements in the switch. Useful for composition. |
| `invalid` | `boolean` | No | If `true`, the switch is marked as invalid. |
| `label` | `string` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `name` | `string` | No | The name of the input field in a switch
(Useful for form submission). |
| `onCheckedChange` | `(details: CheckedChangeDetails) => void` | No | Function to call when the switch is clicked. |
| `readOnly` | `boolean` | No | Whether the switch is read-only |
| `required` | `boolean` | No | If `true`, the switch input is marked as required, |
| `value` | `string | number` | No | The value of switch input. Useful for form submission. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSwitchReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `checked` | `boolean` | No | The controlled checked state of the switch |
| `defaultChecked` | `boolean` | No | 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` | No | Whether the switch is disabled. |
| `form` | `string` | No | The id of the form that the switch belongs to |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string }>` | No | The ids of the elements in the switch. Useful for composition. |
| `invalid` | `boolean` | No | If `true`, the switch is marked as invalid. |
| `label` | `string` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `name` | `string` | No | The name of the input field in a switch
(Useful for form submission). |
| `readOnly` | `boolean` | No | Whether the switch is read-only |
| `required` | `boolean` | No | If `true`, the switch input is marked as required, |
| `value` | `string` | No | The value of checkbox input. Useful for form submission. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `SwitchApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `checked` | `boolean` | No | The controlled checked state of the switch |
| `defaultChecked` | `boolean` | No | 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` | No | Whether the switch is disabled. |
| `form` | `string` | No | The id of the form that the switch belongs to |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string }>` | No | The ids of the elements in the switch. Useful for composition. |
| `invalid` | `boolean` | No | If `true`, the switch is marked as invalid. |
| `label` | `string` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `name` | `string` | No | The name of the input field in a switch
(Useful for form submission). |
| `onCheckedChange` | `(details: CheckedChangeDetails) => void` | No | Function to call when the switch is clicked. |
| `readOnly` | `boolean` | No | Whether the switch is read-only |
| `ref` | `Element` | No |  |
| `required` | `boolean` | No | If `true`, the switch input is marked as required, |
| `value` | `string | number` | No | The value of switch input. Useful for form submission. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseSwitchContext]>` | Yes |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseSwitchReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Thumb Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Thumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-active]` | Present when active or pressed |
| `[data-focus]` | Present when focused |
| `[data-focus-visible]` | Present when focused with keyboard |
| `[data-readonly]` | Present when read-only |
| `[data-hover]` | Present when hovered |
| `[data-disabled]` | Present when disabled |
| `[data-state]` | "checked" | "unchecked" |
| `[data-invalid]` | Present when invalid |
| `[data-required]` | Present when required |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `checked` | `boolean` | Whether the switch is checked |
| `disabled` | `boolean` | Whether the switch is disabled |
| `focused` | `boolean` | Whether the switch is focused |
| `setChecked` | `(checked: boolean) => void` | Sets the checked state of the switch. |
| `toggleChecked` | `VoidFunction` | Toggles the checked state of the switch. |


## Accessibility

Complies with the [Switch WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).

### Keyboard Support

**`Space + Enter`**
Description: Toggle the switch