Formularios React

Componente en react de formulario del kit USS


1import { Form } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";

<Form/>

Componente que encapsula un formulario. No se encarga de la validación de los campos, solo de la presentación. Los campos deben ser agregados dentro de un <FormGroup/> para que se vean correctamente. Adicionalmente, se pueden agregar <FormGroupHelp/> y <FormLabel/> para darle más información al usuario.

Se expone el elemento <input/> para que se puedan agregar eventos de manera nativa. Estos componentes son una encapsulación de la implementación en Vanilla JS de los mismos, para conveniencia y facilidad de uso. Sin embargo, en caso de necesitar modificar el comportamiento de alguno de estos elementos, se recomienda usar la implementación en Vanilla JS.

Props

Prop	Tipo	default	Descripción
children	ReactNode	-	Elementos hijos del formulario.
ref	React.RefObject<HTMLFormElement>	-	Ref del elemento <form>.
...props	HTMLProps<HTMLFormElement>	-	todos los props de un elemento <form>.

el componente <Form/> acepta todos los props de un elemento <form>, como className, style, etc.

Ejemplo básico de uso

1Cargando...

El Componente <Form/> encapsula 4 subcomponentes: <Form.Group/>, <Form.Label/>, <Form.GroupHelp/> y <Form.AbstractInput/>. Estos componentes se usan para estructurar el formulario y darle información al usuario.

<Form.Group/>

Este componente se usa para agrupar campos en un formulario.

Props

Prop	Tipo	default	Descripción
state	"normal" \| "success" \| "warning" \| "error" \| "disabled"	"normal"	Estado del grupo de campos. feedback de validación.
children	ReactNode	-	Elementos hijos del grupo.
...props	HTMLProps<HTMLDivElement>	-	todos los props de un elemento <div>.

El componente <Form.Group/> acepta todos los props de un elemento <div>, como className, style, etc.

<Form.Label/>

Este componente se usa para agregar una etiqueta a un campo de formulario.

Props

Prop	Tipo	default	Descripción
info	string	-	Texto de ayuda, se muestra en un tooltip
children	ReactNode	-	Elementos hijos del grupo.
...props	HTMLProps<HTMLLabelElement>	-	todos los props de un elemento <label>.

el componente <Form.Label/> acepta todos los props de un elemento <label>, como className, style, etc.

<Form.GroupHelp/>

Este componente se usa para agregar información adicional a un campo de formulario.

Props

Prop	Tipo	default	Descripción
children	ReactNode	-	Elementos hijos del grupo.
...props	HTMLProps<HTMLDivElement>	-	todos los props de un elemento <div>.

el componente <Form.GroupHelp/> acepta todos los props de un elemento <div>, como className, style, etc.

Contenido