Switch

The Switch component acts as a binary toggle, visually represented as a pill with a sliding thumb. It provides an immediate, tactile response. Internally, it utilizes a native input type="checkbox" role="switch" to ensure robust accessibility, screen reader support, and native form serialization.

Usage

Like other form inputs, Switch is designed to be wrapped by a FormField component.

<script>
  import { FormField, Switch } from 'cobogo';

  let enableNotifications = $state(false);
</script>

<FormField label="Push Notifications" htmlFor="demo-push" helper="Receive alerts on your device.">
  {#snippet children(props)}
    <Switch bind:checked={enableNotifications} {...props} />
  {/snippet}
</FormField>

Validation States

Validation states map directly to the Curva & Concreto color spectrum. When invalid, the track outline becomes var(--vermelho), and the filled track (when on) becomes var(--vermelho). Valid states utilize var(--verde).

Validation states are typically inherited from the FormField context automatically.

Props