# Input
Captura una sola línea de texto libre como nombres, dominios o tokens. Cuando el contenido puede ocupar varias líneas, cambia a textarea; cuando el valor viene de una lista conocida, usa combobox.
```tsx
import { Input } from "@/components/ui/input";
```
## Default
### Con label
Usa `Label` para nombrar el dato esperado. Los labels son sustantivos cortos en sentence case: _Nombre del expediente_, _Cliente_, _Materia_.
```tsx
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
const id = useId();
```
## Sizes
### Size
El input escala con la prop `size`: `sm`, `md` (default), `lg`. Mantén un único tamaño dentro del mismo formulario.
```tsx
```
## Search
### Variante de búsqueda
Para una caja de búsqueda inline, combina `leadingIcon` con `clearable`. Limita el placeholder al alcance: _Buscar expedientes_, no _Buscar_. La tecla Esc limpia el valor automáticamente.
```tsx
}
placeholder="Buscar expedientes"
clearable
className="w-[260px]"
/>
```
## ⌘K
### Atajo de teclado
Muestra el atajo **⌘K** a la derecha del input para indicar que el campo soporta una paleta de comandos. Cuando el input recibe foco o tiene contenido, el atajo puede reemplazarse por **Esc**.
```tsx
⌘K}
className="w-[260px]"
/>
```
## Error
### Mensaje de error
Comunica el error con un cambio de color en el borde y un mensaje en un elemento hermano conectado vía `aria-describedby`. El mensaje nombra el campo y la restricción, en sentence case y con punto final.
```tsx
const id = useId();
El nombre del expediente no puede contener espacios.
```
## Best practices
### Cuándo usar
- Usa Input para una sola línea de texto libre: nombres, RUT, correos, dominios.
- Cambia a Textarea cuando el contenido pueda ocupar varias líneas.
- Usa Combobox cuando el valor venga de una lista conocida que se filtra al escribir.
- Para una búsqueda inline, usa la variante search con un placeholder con alcance específico.
### Comportamiento
- Valida en blur, no en cada tecla. Muestra el mensaje pasando la prop error y un texto en un elemento hermano vía aria-describedby.
- Recorta espacios al principio y al final antes de enviar.
- Mantén el field enfocable mientras guarda; combina disabled con spinner solo cuando ingresar texto sea imposible.
- No envuelvas un Input con label en un Tooltip; pon el explicador en un botón con icono al lado.
### Contenido
- Los labels son sustantivos cortos en sentence case: Nombre del expediente, Cliente, Materia.
- Los placeholders muestran un ejemplo del valor (expediente-2024, juan.perez@estudio.cl), nunca instrucciones como Ingresa el nombre.
- El texto de ayuda va en sentence case, una oración con punto, en un elemento hermano vía aria-describedby.
- La validación nombra el campo y la restricción, termina en punto y evita por favor: El nombre del expediente es obligatorio., El RUT debe tener 9 dígitos.
### Accesibilidad
- Si usas Label, el input necesita id; sin él, las tecnologías asistivas pierden la asociación.
- Para botones con icono dentro de una fila de inputs, usa Button con aria-label en lugar de un icono sin texto.
- El placeholder de la búsqueda nombra el alcance (Buscar expedientes) para que el rol sea claro sin contexto visual.
- El foco siempre visible: el componente provee el anillo morado Lexy al recibir foco por teclado.