# Toggle

Two-state toggle button with bindable pressed state, sizes (sm/md/lg), variants (default/outline).

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

## Install

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

## 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.


### Toggle

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| pressed | boolean \| undefined | false | No | Yes | Whether it is on. Bindable. |
| disabled | boolean \| undefined | false | No | No | Prevents interaction and dims the control. |
| size | "sm" \| "md" \| "lg" \| undefined | 'md' | No | No | Control height. |
| variant | "default" \| "outline" \| undefined | 'default' | No | No | `outline` adds a border. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| onPressedChange | ((pressed: boolean) => void) \| undefined | - | No | No | Called with the new state. |
| class | (string & (ClassValue \| null)) \| undefined | - | No | No | Classes added to the element. |

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

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import Toggle from './toggle.svelte';

export type ToggleProps = {
    /** Whether it is on. Bindable. */
    pressed?: boolean;
    /** Prevents interaction and dims the control. */
    disabled?: boolean;
    /** Control height. */
    size?: 'sm' | 'md' | 'lg';
    /** `outline` adds a border. */
    variant?: 'default' | 'outline';
    /** Content rendered inside. */
    children?: Snippet;
    /** Called with the new state. */
    onPressedChange?: (pressed: boolean) => void;
} & DefaultProps &
    Omit<HTMLButtonAttributes, 'onclick' | 'children'>;

export { Toggle };
export default Toggle;
~~~~

## Examples

### Disabled

~~~~svelte
<script lang="ts">
    import { TextBoldIcon as Bold } from '@hugeicons/core-free-icons';
    import { Toggle } from '@mielui/svelte/components/toggle';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<Toggle aria-label="Bold" disabled>
    <HugeiconsIcon icon={Bold} size={14} />
</Toggle>
~~~~

### Events

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

    let log = $state('Notifications are on');
</script>

<div class="flex items-center gap-3">
    <Toggle
        onPressedChange={(pressed) => {
            log = pressed ? 'Notifications are muted' : 'Notifications are on';
        }}
    >
        Mute
    </Toggle>
    <span role="status" class="text-sm text-foreground-muted">{log}</span>
</div>
~~~~

### Hero

~~~~svelte
<script lang="ts">
    import {
        TextBoldIcon as Bold,
        TextItalicIcon as Italic,
        TextUnderlineIcon as Underline
    } from '@hugeicons/core-free-icons';
    import { Toggle } from '@mielui/svelte/components/toggle';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let bold = $state(true);
    let italic = $state(false);
    let underline = $state(false);
</script>

<div class="flex flex-col items-center gap-5">
    <div class="flex items-center gap-1" role="group" aria-label="Text formatting">
        <Toggle bind:pressed={bold} aria-label="Bold">
            <HugeiconsIcon icon={Bold} size={14} />
        </Toggle>
        <Toggle bind:pressed={italic} aria-label="Italic">
            <HugeiconsIcon icon={Italic} size={14} />
        </Toggle>
        <Toggle bind:pressed={underline} aria-label="Underline">
            <HugeiconsIcon icon={Underline} size={14} />
        </Toggle>
    </div>
    <p
        class={`m-0 text-sm text-foreground ${bold ? 'font-medium' : ''} ${italic ? 'italic' : ''} ${underline ? 'underline underline-offset-4' : ''}`}
    >
        The quick brown fox jumps over the lazy dog.
    </p>
</div>
~~~~

### Icon

~~~~svelte
<script lang="ts">
    import { TextBoldIcon as Bold } from '@hugeicons/core-free-icons';
    import { Toggle } from '@mielui/svelte/components/toggle';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<Toggle aria-label="Bold">
    <HugeiconsIcon icon={Bold} size={14} />
</Toggle>
~~~~

### Sizes

~~~~svelte
<script lang="ts">
    import { TextBoldIcon as Bold } from '@hugeicons/core-free-icons';
    import { Toggle } from '@mielui/svelte/components/toggle';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<div class="flex items-center gap-2">
    <Toggle aria-label="Bold" variant="outline" size="sm">
        <HugeiconsIcon icon={Bold} size={12} />
    </Toggle>
    <Toggle aria-label="Bold" variant="outline">
        <HugeiconsIcon icon={Bold} size={14} />
    </Toggle>
    <Toggle aria-label="Bold" variant="outline" size="lg">
        <HugeiconsIcon icon={Bold} size={16} />
    </Toggle>
</div>
~~~~

### Text

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

<Toggle>Option</Toggle>
~~~~

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