Ejemplos de Formularios
Ejemplos de implementación de formularios con el Kit Digital USS
1import { Form } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
Ejemplos de Formularios
Los siguientes ejemplos muestran los diferentes tipos de campos de formulario disponibles en el Kit Digital USS. Cada componente está diseñado para ser utilizado dentro de un <Form.Group/> y puede incluir <Form.Label/> y <Form.GroupHelp/> para proporcionar información adicional al usuario.
Input de Texto
Componente que encapsula un campo de texto básico. Se utiliza para la entrada de texto simple y puede incluir validación y mensajes de error.
Ejemplo de uso
1Cargando...Input de Fecha
Componente especializado para la selección de fechas. Incluye un selector de calendario y formateo automático.
Ejemplo de uso
1Cargando...Input de Email
Campo especializado para la entrada de correos electrónicos con validación integrada del formato.
Ejemplo de uso
1Cargando...Checkbox
Componente para selección múltiple. Permite al usuario seleccionar varias opciones de un conjunto.
Ejemplo de uso
1Cargando...Input de Contraseña
Campo especializado para entrada segura de contraseñas con opción de mostrar/ocultar el texto.
Ejemplo de uso
1Cargando...Radio Buttons
Componente para selección única. Permite al usuario seleccionar una opción de un conjunto.
Ejemplo de uso
1Cargando...Select
Componente de selección desplegable con soporte para búsqueda y opciones personalizables.
Ejemplo de uso
1Cargando...Estados del Formulario
Los campos de formulario pueden tener diferentes estados que indican su validación o estado actual:
- Normal: Estado por defecto
- Success: Indica que el campo es válido
- Warning: Indica una advertencia
- Error: Indica un error de validación
- Disabled: Campo deshabilitado
Ejemplo de uso
1Cargando...Switch
Componente de tipo interruptor para opciones binarias.
Ejemplo de uso
1Cargando...Textarea
Campo para entrada de texto multilínea.
Ejemplo de uso
1Cargando...Input de Tiempo
Componente especializado para la selección de tiempo.
Ejemplo de uso
1Cargando...Ejemplo Completo
Este ejemplo muestra todos los tipos de inputs disponibles en un solo formulario, demostrando cómo pueden combinarse y utilizarse juntos.
1Cargando...