Inputs

Campos de formulario con .cl-input. Acompañalos con una etiqueta .cl-label y, si hace falta, un texto de ayuda .cl-help. La misma clase funciona sobre <input>, <select> y <textarea>.

Campo de texto

Combinación básica: etiqueta, control y texto de ayuda.

<div>
  <label class="cl-label">Nombre completo</label>
  <input class="cl-input" value="María José Rodríguez Vargas">
  <div class="cl-help">Como aparece en el documento de identidad.</div>
</div>

Campo requerido

Marcá la etiqueta con un asterisco y agregá el atributo required al control.

<div>
  <label class="cl-label">Correo electrónico <span aria-hidden="true">*</span></label>
  <input class="cl-input" type="email" placeholder="[email protected]" required>
</div>

Con ícono

Envolvé el control en .cl-input-wrap, poné el SVG de primero y agregá .cl-input--with-icon al input para reservar el espacio.

<div>
  <label class="cl-label">Código</label>
  <div class="cl-input-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"/><path d="M5 19c1-3.5 4-5 7-5s6 1.5 7 5"/></svg>
    <input class="cl-input cl-input--with-icon" value="1-1789-0345">
  </div>
</div>

Búsqueda

El mismo patrón con ícono sirve para búsquedas; usá placeholder en lugar de valor.

<div class="cl-input-wrap">
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-3.5-3.5"/></svg>
  <input class="cl-input cl-input--with-icon" placeholder="Buscar por nombre, código o categoría...">
</div>

Select

Aplicá .cl-input directamente al <select>; el caret viene incluido en la clase.

<div>
  <label class="cl-label">Tipo</label>
  <select class="cl-input">
    <option>Mensual</option>
    <option>Quincenal</option>
    <option>Semanal</option>
  </select>
</div>

Textarea

Para textos largos usá <textarea> con .cl-input y definí la altura con rows.

<div>
  <label class="cl-label">Notas</label>
  <textarea class="cl-input" rows="4"></textarea>
</div>

Monto con prefijo

Prefijo de moneda posicionado sobre .cl-input-wrap. Montos siempre con números tabulares.

<div>
  <label class="cl-label">Monto</label>
  <div class="cl-input-wrap">
    <input class="cl-input" value="850,000.00" style="padding-left: 28px; font-variant-numeric: tabular-nums">
    <span style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-4); font-size: 12px">₡</span>
  </div>
  <div class="cl-help">Colones, mensual.</div>
</div>

Tamaño pequeño

--sm para toolbars densas y paginación.

<select class="cl-input cl-input--sm" style="width: 70px">
  <option>12</option>
  <option>25</option>
  <option>50</option>
</select>