LifeUI
1.53.2Field
Un contenedor que agrupa un label, un campo de entrada y un hint, proporcionando una estructura consistente para los campos de formulario.
El nombre del proyecto debe ser único
Con error
Cuando se proporciona la propiedad error, el componente muestra el mensaje de error en lugar del hint y aplica el estilo visual de error.
El nombre del proyecto ya existe
Campo requerido
Usa la propiedad required para indicar que el campo es obligatorio. Esto mostrará un asterisco (*) junto al label.
Label con complemento
La propiedad labelComplement te permite agregar texto adicional o elementos React junto al label, como información adicional o tooltips.
Props
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
label | string | - | Texto del label que se mostrará arriba del campo. |
labelComplement | string | - | Texto complementario que se mostrará junto al label. |
hint | ReactNode | - | Contenido del hint que se mostrará debajo del campo. Si hay un error, se mostrará el error. |
hintIcon | boolean | - | Mostrar icono decorativo en el hint. Por defecto es false. |
error | string | - | Mensaje de error que se mostrará en lugar del hint cuando esté presente. |
required | boolean | - | Indica si el campo es requerido. Muestra un asterisco (*) junto al label. |
htmlFor | string | - | ID del elemento controlado por el label. Se pasa al componente Label. |
className | string | - | Clases CSS adicionales para el contenedor principal. |
children | ReactNode | - | El campo de entrada o cualquier otro contenido que se mostrará entre el label y el hint. |
...rest | ComponentProps<"div"> | - | Todas las props del elemento HTML div. |