# Switch

## Example

```svelte
<script>
	import { Switch, Label } from '@foxui/all';

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

<div class="not-prose flex flex-col gap-2">
	<Switch bind:checked onCheckedChange={() => (checked2 = !checked2)} />
	<Switch bind:checked={checked2} onCheckedChange={() => (checked = !checked)} />
	<Switch disabled />
</div>

<h3>With Label</h3>

<div class="not-prose flex items-center space-x-2">
	<Switch id="terms-switch" aria-labelledby="terms-switch-label" />
	<Label
		id="terms-switch-label"
		for="terms-switch"
		class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
	>
		Yes, I agree to the terms and sell my soul (and no I didn't read the terms)
	</Label>
</div>
```

## Documentation

## Usage

```svelte
<Switch bind:checked />
```

## Sources

This component uses the bits-ui component: Switch, see here for the documentation for that: https://bits-ui.com/docs/components/switch/llms.txt

## API Reference

### Switch
A toggle control that switches between on and off states. Built on top of the bits-ui Switch primitive.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| checked | `boolean` | `false` | Whether the switch is checked (on). (bindable) |
| onCheckedChange | `(checked: boolean) => void` | `-` | A callback invoked when the checked state changes. |
| disabled | `boolean` | `false` | Whether the switch is disabled. |
| name | `string` | `-` | The name of the switch used in form submission. |
| required | `boolean` | `false` | Whether the switch is required. |
| value | `string` | `-` | The value of the switch used in form submission. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |