Form

Forms are necessary to get input data from the user, which can be used for various purposes.

This provider offers a simple way to create and configure forms in your application.

Implementation

To start creating a form, you need to import the form component from the library. Use it to wrap every other input that you may use for your desired form.

basic-component.tsx
    
       
 import { useState } from "react"; 
 import { Form, TextField, Button, type FormValues } from "cloth-ui"; 
 
 export const BasicComponent = () => { 

  const [username, setUsername] = useState(""); 

  const [password, setPassword] = useState(""); 
 

  // When getting the data, you need to pass the id of the input 

  // Example: If there is an input with id "prompt" 

  // you can get its value through 'data["prompt"]' 

  const handleSubmit = (data: FormValues) => { 

    setUsername(data["username"].toString()): 

    setPassword(data["password"].toString()): 

  }; 
 

  // You need to set the button type to "submit" 

  // to trigger the onSubmit function of the form 

  return ( 

    <Form 

      id="myForm" 

      submit={handleSubmit} 

    > 

      <TextField id="username" variant="primary" label="Username" /> 

      <TextField 

        id="password" 

        variant="primary" 

        label="Password" 

        type="password" 

      /> 

      <Button variant="secondary" text="Submit" buttonType="submit" /> 

      {username && password && ( 

        <span>Welcome, {username}!</span> 

      )} 

    </Form> 

  ); 
 };

Note that you can add styles to the form component, and its recommended to do so.