25/Formularios y datos

Formularios

Input, textarea, select, checkbox, radio, switch y archivo, con texto de ayuda y estados de error y éxito.

Campos de texto

Nombre

Correo (opcional)

Solo para enviarte la factura.

Plan

Sitio web

https://

Mensaje

HTML

<div class="grid max-w-[640px] gap-5 cb-sm:grid-cols-2">
  <div class="cb-field">
    <label class="cb-field__label" for="f-name">Nombre</label>
    <input class="cb-input" id="f-name" placeholder="María Ramírez" autocomplete="name">
  </div>
  <div class="cb-field">
    <label class="cb-field__label" for="f-email">Correo <span class="cb-field__optional">(opcional)</span></label>
    <input class="cb-input" id="f-email" type="email" placeholder="maria@ejemplo.com" aria-describedby="f-email-hint">
    <p class="cb-field__hint" id="f-email-hint">Solo para enviarte la factura.</p>
  </div>
  <div class="cb-field">
    <label class="cb-field__label" for="f-plan">Plan</label>
    <div class="cb-select"><select class="cb-input" id="f-plan"><option>Básico</option><option>Pro</option><option>Empresa</option></select></div>
  </div>
  <div class="cb-field">
    <label class="cb-field__label" for="f-site">Sitio web</label>
    <div class="cb-input-group"><span class="cb-input-group__addon">https://</span><input class="cb-input" id="f-site" placeholder="ejemplo.com"></div>
  </div>
  <div class="cb-field cb-sm:col-span-2">
    <label class="cb-field__label" for="f-msg">Mensaje</label>
    <textarea class="cb-input cb-textarea" id="f-msg" placeholder="Cuéntanos qué necesitas"></textarea>
  </div>
</div>

Error y éxito

El estado de error se activa con aria-invalid="true" en el input o con cb-field--error. El mensaje solo se muestra en estado de error o éxito.

NIT

El NIT no es válido.

Usuario

Disponible.

HTML

<div class="grid max-w-[640px] gap-5 cb-sm:grid-cols-2">
  <div class="cb-field">
    <label class="cb-field__label" for="f-nit">NIT</label>
    <input class="cb-input" id="f-nit" value="12345" aria-invalid="true" aria-describedby="f-nit-msg">
    <p class="cb-field__message" id="f-nit-msg">El NIT no es válido.</p>
  </div>
  <div class="cb-field cb-field--success">
    <label class="cb-field__label" for="f-user">Usuario</label>
    <input class="cb-input" id="f-user" value="maria.r" aria-describedby="f-user-msg">
    <p class="cb-field__message" id="f-user-msg">Disponible.</p>
  </div>
</div>

Checkbox, radio y switch

HTML

<div class="flex flex-wrap gap-10">
  <fieldset class="cb-fieldset">
    <legend class="cb-fieldset__legend">Notificaciones</legend>
    <label class="cb-check"><input class="cb-checkbox" type="checkbox" checked>Correo</label>
    <label class="cb-check"><input class="cb-checkbox" type="checkbox">SMS</label>
    <label class="cb-check"><input class="cb-checkbox" type="checkbox" disabled>WhatsApp</label>
  </fieldset>
  <fieldset class="cb-fieldset">
    <legend class="cb-fieldset__legend">Frecuencia</legend>
    <label class="cb-check"><input class="cb-radio" type="radio" name="freq" checked>Diaria</label>
    <label class="cb-check"><input class="cb-radio" type="radio" name="freq">Semanal</label>
  </fieldset>
  <fieldset class="cb-fieldset">
    <legend class="cb-fieldset__legend">Preferencias</legend>
    <label class="cb-check"><input class="cb-switch" type="checkbox" role="switch" checked><span class="cb-check__text">Modo compacto<span class="cb-check__hint">Reduce el espaciado.</span></span></label>
    <label class="cb-check"><input class="cb-switch" type="checkbox" role="switch">Beta</label>
  </fieldset>
</div>

Archivo y tamaños

Adjuntar comprobante

HTML

<div class="flex max-w-[520px] flex-col gap-4">
  <div class="cb-field">
    <label class="cb-field__label" for="f-file">Adjuntar comprobante</label>
    <input class="cb-file" id="f-file" type="file">
  </div>
  <input class="cb-input cb-input--sm" placeholder="Pequeño" aria-label="Pequeño">
  <input class="cb-input" placeholder="Mediano" aria-label="Mediano">
  <input class="cb-input cb-input--lg" placeholder="Grande" aria-label="Grande">
</div>

Clases y modificadores

Clase	Descripción
`.cb-field`	Agrupa etiqueta, control, ayuda y mensaje.
`.cb-field__label`, `.cb-field__optional`	Etiqueta y marca de opcional.
`.cb-field__hint`	Texto de ayuda.
`.cb-field__message`	Mensaje visible solo con error o éxito.
`.cb-field--error`, `.cb-field--success`	Estados. El error también se activa con `aria-invalid="true"`.
`.cb-input`	Input, select o textarea. `--sm` y `--lg` para tamaños.
`.cb-textarea`	Altura automática y redimensión vertical.
`.cb-select`	Envoltorio del `select` con flecha propia.
`.cb-input-group`, `.cb-input-group__addon`	Input con prefijo o sufijo.
`.cb-check`, `.cb-check__text`, `.cb-check__hint`	Etiqueta clicable para checkbox, radio y switch.
`.cb-checkbox`, `.cb-radio`, `.cb-switch`	Controles con estilo propio, nativos por debajo.
`.cb-file`	Input de archivo.
`.cb-fieldset`, `.cb-fieldset__legend`	Grupo de opciones.

Accesibilidad

Cada control necesita un label asociado o aria-label.
Relaciona ayuda y errores con aria-describedby.
El switch es un checkbox con role="switch": funciona con teclado sin JS.
El color no es la única señal de error: el mensaje lo explica en texto.