# Controles

> Texto, select, área de texto, casillas, radios e interruptor, con sus estados.

Categoría: Formularios · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- Texto: datos de una línea. Usa el type y el autocomplete que corresponden (email, tel, name).
- Select: una opción entre 8 o menos; con más, Combobox.
- Área de texto: respuestas largas, con el máximo de caracteres a la vista.
- Casillas: una o más opciones independientes.
- Radios: una sola opción entre pocas que conviene ver todas.
- Interruptor: un ajuste que se aplica al tiro, sin botón Guardar.

## Guía: En otras páginas

- Etiqueta, ayuda, error, "(opcional)" y cómo agrupar los campos: Campo.
- Ícono, texto fijo o botón dentro del campo: Campo con complementos.
- Subir archivos: Carga de archivos.
- Listas largas que se filtran: Combobox. Fechas: Calendario. Códigos de un solo uso: Código de verificación.

## Texto

```html
<div class="w-full max-w-sm">
<div>
    <label for="f-nombre" class="block text-sm font-medium mb-1.5">Nombre completo</label>
    <input type="text" id="f-nombre" name="nombre" autocomplete="name" aria-describedby="f-nombre-ayuda" placeholder="Ej: Andrés Vergara" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 outline-none text-sm dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" />
    <div id="f-nombre-ayuda" class="text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">Como aparece en tu cédula.</div>
  </div>
</div>
```

## Select

```html
<div class="w-full max-w-sm">
<div>
    <label for="f-comite" class="block text-sm font-medium mb-1.5">Comité de interés</label>
    <div class="relative">
      <select id="f-comite" name="comite" class="w-full h-11 pl-4 pr-10 rounded-lg border border-ccs-line-strong bg-white focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 outline-none text-sm appearance-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25">
        <option>Comercio Electrónico</option><option>Sostenibilidad</option><option>Pymes</option><option>Innovación</option>
      </select>
      <iconify-icon icon="solar:alt-arrow-down-bold" class="absolute right-3 top-3.5 text-[16px] text-ccs-slate pointer-events-none dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon>
    </div>
  </div>
</div>
```

## Área de texto

```html
<div class="w-full max-w-lg">
<div class="">
    <label for="f-mensaje" class="block text-sm font-medium mb-1.5">Mensaje</label>
    <textarea id="f-mensaje" name="mensaje" rows="4" maxlength="500" aria-describedby="f-mensaje-ayuda" placeholder="Cuéntanos sobre tu empresa y áreas de interés…" class="w-full px-4 py-3 rounded-lg border border-ccs-line-strong bg-white focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 outline-none text-sm resize-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25"></textarea>
    <div class="flex justify-between text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2"><span id="f-mensaje-ayuda">Mínimo 50 caracteres.</span><span class="mono" aria-hidden="true">0 / 500</span></div>
  </div>
</div>
```

## Casillas

```html
<div class="w-full max-w-sm">
<fieldset>
    <legend class="text-sm font-medium mb-2.5">Intereses</legend>
    <div class="space-y-2.5 text-sm">
      <label class="flex items-center gap-3 cursor-pointer"><input type="checkbox" name="intereses" checked class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid"/>Eventos y capacitaciones</label>
      <label class="flex items-center gap-3 cursor-pointer"><input type="checkbox" name="intereses" class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid"/>Estudios sectoriales</label>
      <label class="flex items-center gap-3 cursor-pointer"><input type="checkbox" name="intereses" checked class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid"/>Boletín semanal</label>
      <label class="flex items-center gap-3 cursor-pointer"><input type="checkbox" name="intereses" class="ccs-check w-4 h-4 rounded border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid"/>Comités de trabajo</label>
    </div>
  </fieldset>
</div>
```

## Radios

```html
<div class="w-full max-w-sm">
<fieldset>
    <legend class="text-sm font-medium mb-2.5">Tamaño de empresa</legend>
    <div class="space-y-2.5 text-sm">
      <label class="flex items-center gap-3 cursor-pointer"><input type="radio" name="tamano" class="ccs-check w-4 h-4 rounded-full border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid"/>Micro (1–9)</label>
      <label class="flex items-center gap-3 cursor-pointer"><input type="radio" name="tamano" checked class="ccs-check w-4 h-4 rounded-full border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid"/>Pequeña (10–49)</label>
      <label class="flex items-center gap-3 cursor-pointer"><input type="radio" name="tamano" class="ccs-check w-4 h-4 rounded-full border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid"/>Mediana (50–199)</label>
      <label class="flex items-center gap-3 cursor-pointer"><input type="radio" name="tamano" class="ccs-check w-4 h-4 rounded-full border border-ccs-line-strong bg-white text-ccs-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ccs-blue focus-visible:ring-offset-2 dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-surface dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-blue-mid"/>Grande (200+)</label>
    </div>
  </fieldset>
</div>
```

## Interruptor

```html
<div class="w-full max-w-sm">
<fieldset>
    <legend class="text-sm font-medium mb-2.5">Notificaciones</legend>
    <div class="space-y-3">
      <label class="flex items-center justify-between gap-4 text-sm cursor-pointer">
        <span>Resumen semanal</span>
        <span class="relative inline-flex shrink-0 w-11 h-6">
          <input type="checkbox" role="switch" name="resumen" checked class="peer sr-only"/>
          <span class="absolute inset-0 rounded-full bg-ccs-line-strong transition-colors peer-checked:bg-ccs-blue peer-focus-visible:ring-2 peer-focus-visible:ring-ccs-blue peer-focus-visible:ring-offset-2 motion-reduce:transition-none dark:bg-ccs-dark-line dark:peer-checked:bg-ccs-blue-mid dark:peer-focus-visible:ring-ccs-dark-accent dark:peer-focus-visible:ring-offset-ccs-dark-surface" aria-hidden="true"></span>
          <span class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-ccs-sm transition-transform peer-checked:translate-x-5 motion-reduce:transition-none" aria-hidden="true"></span>
        </span>
      </label>
      <label class="flex items-center justify-between gap-4 text-sm cursor-pointer">
        <span>Alertas urgentes</span>
        <span class="relative inline-flex shrink-0 w-11 h-6">
          <input type="checkbox" role="switch" name="alertas" class="peer sr-only"/>
          <span class="absolute inset-0 rounded-full bg-ccs-line-strong transition-colors peer-checked:bg-ccs-blue peer-focus-visible:ring-2 peer-focus-visible:ring-ccs-blue peer-focus-visible:ring-offset-2 motion-reduce:transition-none dark:bg-ccs-dark-line dark:peer-checked:bg-ccs-blue-mid dark:peer-focus-visible:ring-ccs-dark-accent dark:peer-focus-visible:ring-offset-ccs-dark-surface" aria-hidden="true"></span>
          <span class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-ccs-sm transition-transform peer-checked:translate-x-5 motion-reduce:transition-none" aria-hidden="true"></span>
        </span>
      </label>
    </div>
  </fieldset>
</div>
```

## Estados

```html
<div class="grid w-full gap-6 sm:grid-cols-2">
  <div>
    <label for="e-normal" class="block text-sm font-medium mb-1.5">Normal</label>
    <input type="text" id="e-normal" placeholder="Ej: Comercial del Sur" class="w-full h-11 px-4 rounded-lg border text-sm outline-none border-ccs-line-strong bg-white dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" />
  </div>
  <div>
    <label for="e-foco" class="block text-sm font-medium mb-1.5">Con foco</label>
    <input type="text" id="e-foco" value="Comercial del Sur" class="w-full h-11 px-4 rounded-lg border text-sm outline-none border-ccs-blue bg-white ring-2 ring-ccs-blue/15 dark:border-ccs-dark-accent dark:bg-ccs-dark-surface dark:ring-ccs-dark-accent/25" />
  </div>
  <div>
    <label for="e-deshabilitado" class="block text-sm font-medium mb-1.5 text-ccs-slate dark:text-ccs-dark-text-2">Deshabilitado</label>
    <input type="text" id="e-deshabilitado" value="No se puede editar" disabled class="w-full h-11 px-4 rounded-lg border text-sm outline-none border-ccs-line bg-ccs-bg text-ccs-slate cursor-not-allowed dark:border-ccs-dark-line dark:bg-ccs-dark-bg dark:text-ccs-dark-text-2" />
  </div>
  <div>
    <label for="e-lectura" class="block text-sm font-medium mb-1.5">Solo lectura</label>
    <input type="text" id="e-lectura" value="76.123.456-7" readonly class="w-full h-11 px-4 rounded-lg border text-sm outline-none border-ccs-line-strong bg-ccs-bg focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-overlay dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" />
  </div>
</div>
```