Checkbox

<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 CheckboxExample from './CheckboxExample.svelte';
</script>

<CheckboxExample invalid={false} disabled={false} required={false} />

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

<div class="field">
  <Checkbox
    bind:checked={agreed}
    {invalid}
    {required}
    {disabled}
    aria-describedby={invalid ? 'terms-error' : undefined}
  >
    {#snippet label()}I agree to the <a href="#terms">demo terms</a>.{/snippet}
  </Checkbox>
  {#if invalid}
    <p id="terms-error" class="error">Agree to the demo terms to continue.</p>
  {/if}
  <p aria-live="polite">{agreed ? 'Agreed' : 'Not agreed'}</p>
</div>

<style>
  .field {
    max-width: 340px;
  }
  .error {
    color: var(--portal-error);
  }
</style>