TextInput

The TextInput component is the foundational atom for all text-based data entry in the COBOGÓ design system. It embodies the Curva & Concreto doctrine with its precise typography, honest pool shadows on focus, and sharp validation states.

Usage

TextInput is designed to be composed within a FormField component, which automatically handles label association, helper text, and validation states via Svelte context.

<script>
  import { FormField, TextInput } from 'cobogo';
  let email = $state('');
</script>

<FormField label="Email Address" htmlFor="email-input" required>
  {#snippet children(props)}
    <TextInput type="email" bind:value={email} placeholder="nome@exemplo.com" {...props} />
  {/snippet}
</FormField>

Validation States

Validation states (invalid=true or valid=true) are typically inherited from the FormField wrapper via context, but can also be explicitly passed as props.

Following the design system rules, invalid states use var(--vermelho-soft) for backgrounds and var(--vermelho) for borders and text. Valid states use var(--verde-soft) and var(--verde).

<!-- Invalid state (typically managed by FormField) -->
<TextInput invalid value="Incorrect format" />

<!-- Valid state -->
<TextInput valid value="Correct format" />

Props