Componentes de formulario
Todos los controles que necesita un formulario, desde un input de texto hasta un multiselect con búsqueda, un selector de rango de fechas y un campo de código de un solo uso. Comparten un mismo sistema de campos para etiquetas, descripciones y errores, así que la validación se lee igual en todas partes.
Los inputs se quedan en 16 píxeles en pantallas táctiles para que iOS no haga zoom, los campos no válidos pueden vibrar para llamar la atención y cada control funciona solo con el teclado.
- Calendar
- Checkbox
- Combobox
- Date picker
- Field
- Input
- Input group
- Input OTP
- Label
- Native select
- Questionnaire
- Radio group
- Select
- Slider
- Switch
- Textarea
- CalendarUna cuadrícula de fechas para selección única, de rango y múltiple, con meses deslizantes, vistas previas de rango y días de tamaño táctil.
- CheckboxUna casilla de verificación cuya marca se dibuja, con padres indeterminados, grupos y etiquetas que comparten su hover.
- ComboboxUn select filtrable con chips, grupos y resultados asíncronos, en un popup que cambia de tamaño mientras escribes.
- Date pickerUn botón que abre un calendario en un popover, o en una hoja inferior en móviles, para fechas únicas y rangos.
- FieldEtiquetas, descripciones y errores conectados a su control, con estados de validación y diseños para formularios.
- InputUn campo de texto con tres tamaños, estados inválido y de solo lectura, estilos de validación nativos y una fuente táctil de 16px para que los móviles nunca hagan zoom.
- Input groupUn input con iconos, texto, botones o una pista de teclado acoplados, que comparten un solo borde y anillo de foco.
- Input OTPSlots de código de un solo uso que admiten escritura, pegado y autocompletado de SMS, con una animación opcional que encadena los códigos en cascada y un estado para la verificación.
- LabelUna etiqueta que sigue a su control: se atenúa cuando está deshabilitado y lo marca como obligatorio u opcional por sí sola.
- Native selectEl select propio del navegador, con el estilo de Input, un marcador discreto, compatibilidad con Field y el selector del sistema operativo en cada dispositivo.
- QuestionnaireUn formulario paso a paso que se mueve entre preguntas con sensación de dirección, muestra el progreso real y responde desde el teclado.
- Radio groupElige una opción de un conjunto, con un punto que pasa de una opción a otra y tarjetas cuyo anillo de selección se desliza hasta la nueva elección.
- SelectElige una o varias opciones de una lista que se abre sobre el valor actual, con typeahead, grupos y soporte de formularios.
- SliderElige un valor o un rango arrastrando, tocando la pista o usando las teclas, con saltos que se deslizan y una burbuja de valor opcional.
- SwitchUn interruptor de activado/desactivado que puedes tocar, pulsar o arrastrar, con un thumb que se estira bajo tu dedo y un estado pendiente opcional para los guardados.
- TextareaTexto de varias líneas que crece con suavidad según lo que escribes entre un mínimo y un máximo de filas, con contadores, validación y un atajo para enviar.
Usados en bloques Pro
Bloques para productos de IA construidos con estos componentes.
- MarkdownRenderizado de Markdown para respuestas de IA. Cubre streaming sin sintaxis a medio escribir, tablas que puedes copiar y citas en línea.
- API keysLa página de claves de API de un producto de IA. Cubre un secreto que se muestra una sola vez, revocar con deshacer y rotación con periodo de gracia.
- NotificationsLa sección Notificaciones de los ajustes de un producto de IA. Cubre una cuadrícula de canal por evento, horas de silencio y el permiso del navegador para push.
- SecurityLa sección Seguridad de los ajustes de un producto de IA. Cubre sesiones, dos factores con códigos de recuperación y eliminación tras una confirmación escrita.
- BillingLa página de plan y uso de un producto de IA. Cubre créditos que se agotan a mitad de ciclo, cambios de plan con prorrateo y errores de tarjeta.
- ModelsLa página Modelos de los ajustes de un producto de IA. Cubre el modelo y el esfuerzo por defecto, proveedores y servidores propios con prueba de conexión.