Radio

The Radio component provides a custom-styled, accessible radio button control. True to the Curva & Concreto aesthetic, it utilizes a fully circular outer boundary (--r-pill), but reveals a sharp, geometric inner dot when active. It utilizes native input type="radio" mechanics under the hood.

Usage

Radios are designed to be used in groups where only one option can be selected. Wrap them in a FormField for consistent labeling.

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

  let preference = $state('email');
</script>

<FormField label="Contact Preference" htmlFor="demo-contact-1">
  {#snippet children(props)}
    <div class="flex gap-4">
      <label class="flex items-center gap-2">
        <Radio value="email" bind:group={preference} {...props} />
        <span>Email</span>
      </label>
      <label class="flex items-center gap-2">
        <Radio value="sms" bind:group={preference} {...props} id="demo-contact-2" />
        <span>SMS</span>
      </label>
    </div>
  {/snippet}
</FormField>

Validation States

Following the Curva & Concreto doctrine, validation states affect both the outer ring and the inner dot. When invalid, the outer ring turns var(--vermelho), and the inner dot (when selected) also becomes var(--vermelho). Valid states mirror this logic using the var(--verde) spectrum.

Validation states are typically inherited from the FormField context automatically.

Props