Checkbox

The Checkbox component provides a custom-styled, accessible checkbox control. It adheres strictly to the Curva & Concreto aesthetic by providing a structural box (--r-1 radius) that reveals a sharp checkmark when activated. It utilizes native input type="checkbox" mechanics under the hood to ensure perfect accessibility and form serialization.

Usage

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

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

  let subscribe = $state(true);
</script>

<FormField label="Newsletter" htmlFor="demo-subscribe">
  {#snippet children(props)}
    <Checkbox bind:checked={subscribe} {...props} />
  {/snippet}
</FormField>

Validation States

Following the Curva & Concreto doctrine, validation states provide unmistakable feedback. When invalid, the checkbox boundary turns var(--vermelho), and its background (if unchecked) becomes var(--vermelho-soft). When checked and invalid, the box is filled with var(--vermelho). Valid states mirror this logic using the var(--verde) spectrum.

Validation states are typically inherited from the FormField context automatically.

Props