# Switch

Toggle switch with role="switch", bindable checked state, optional label and description.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: components/_internal/field-metadata, utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add switch
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Switch

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| checked | boolean \| undefined | false | No | Yes | Whether it is on. Bindable. |
| label | string \| undefined | - | No | No | Visible label linked to the control. |
| description | string \| undefined | - | No | No | Supporting text under the label, announced with the control. |
| element | HTMLButtonElement \| undefined | - | No | Yes | Bindable reference to the DOM element. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { HTMLButtonAttributes } from 'svelte/elements';
import Switch from './switch.svelte';

export type SwitchProps = {
    /** Whether it is on. Bindable. */
    checked?: boolean;
    /** Visible label linked to the control. */
    label?: string;
    /** Supporting text under the label, announced with the control. */
    description?: string;
    /** Bindable reference to the DOM element. */
    element?: HTMLButtonElement | undefined;
} & Partial<HTMLButtonAttributes>;

export default Switch;
export { Switch };
~~~~

## Examples

### Basic

~~~~svelte
<script lang="ts">
    import { Switch } from '@mielui/svelte/components/switch';
</script>

<Switch label="Notifications" />
~~~~

### Description

~~~~svelte
<script lang="ts">
    import { Switch } from '@mielui/svelte/components/switch';
</script>

<Switch label="Auto-save" description="Automatically save changes as you work." />
~~~~

### Disabled

~~~~svelte
<script lang="ts">
    import { Switch } from '@mielui/svelte/components/switch';
</script>

<Switch disabled label="Unavailable" />
~~~~

For the rendered reference, visit [/docs/components/switch](/docs/components/switch).