SystemDocs

Forms (Formularios)

Componentes de entrada de datos diseñados para ser accesibles, componibles y fáciles de validar.

Input Básico

Code Snippet 
<div class="grid w-full max-w-sm items-center gap-2">
  <Label for="email">Correo electrónico</Label>
  <Input type="email" id="email" placeholder="ejemplo@correo.com" />
</div>

Campo con Validación (Error)

El correo electrónico introducido no es válido.

Code Snippet 
<FormField error="El correo electrónico introducido no es válido.">
  <Label for="email-error" slot="label">Correo electrónico</Label>
  <Input type="email" id="email-error" placeholder="ejemplo@correo.com" error={true} />
</FormField>

Textarea

Code Snippet 
<div class="grid w-full max-w-sm gap-2">
  <Label for="message">Mensaje</Label>
  <Textarea id="message" placeholder="Escribe tu mensaje aquí..." />
</div>

Checkbox

Code Snippet 
<Checkbox 
  id="terms" 
  label="Acepto los términos y condiciones" 
/>

Switch

Code Snippet 
<div class="flex items-center space-x-4">
  <Switch id="airplane-mode" size="md" />
  <Label for="airplane-mode">Modo Avión</Label>
</div>