Switch

<script lang="ts">
  import 'portal-bits/styles.css';
  import 'portal-bits/tokens.css';
  import type { Snippet } from 'svelte';

  let { children }: { children: Snippet } = $props();
</script>

{@render children()}

<script lang="ts">
  import SwitchExample from './SwitchExample.svelte';
</script>

<SwitchExample disabled={false} />

<script lang="ts">
  import { Switch } from 'portal-bits';
  let { disabled = false }: { disabled?: boolean } = $props();
  let checked = $state(false);
</script>

<div class="row">
  <Switch label="Enable notifications" bind:checked {disabled} />
  <span>Notifications {checked ? 'on' : 'off'}</span>
</div>

<style>
  .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
</style>