React Suite is a collection of beautiful and customizable components for ReactJS that makes building user interfaces easier. One essential component is the Input. It handles form validation and user input smoothly, showing helpful error messages. This makes it perfect for creating strong and user-friendly web apps.
Form validation input
The Input component in React Suite is a flexible form input that can be used as a regular text input or as a textarea. It can be easily customized using attributes like placeholder, size, and validation. You can also trigger actions and show tooltips. It’s a user-friendly way to handle user input in React applications.
Syntax:
import { Input } from 'rsuite';
const InputForm = () => (
<>
<Input placeholder="Input" />
</>
);
Steps to create the application and install required modules:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install rsuite
Step 4: Import Required Styles in the `App.js` file in the `src` folder.
import "rsuite/dist/rsuite.min.css";
Step 5: Define the required Validation Schema and States
Step 6: Write desired code for your application.
Step 7: Run the application.
npm start
Note: Your application is now running on the`http://localhost:3000/`
Example 1: Simple Submit Form default input validation
Javascript
import { Form, Button, Schema } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const nameRule = Schema.Types.StringType().isRequired( "This field is required." ); const emailRule = Schema.Types.StringType().isEmail( "Please enter a valid email address." ); return ( <Form> <Form.Group controlId="name"> <Form.ControlLabel> Username </Form.ControlLabel> <Form.Control name="name" rule={nameRule} /> </Form.Group> <Form.Group controlId="email"> <Form.ControlLabel>Email</Form.ControlLabel> <Form.Control name="email" rule={emailRule} /> </Form.Group> <Button appearance="primary" type="submit"> Submit </Button> </Form> ); } export default App; |
Output: The above example, Showcases a simple submit form with two input fields: `Username` and `Email`. In this example we have used React Suite’s components: `Form`, `Button` and `Form.Control` with custom validation rules (nameRule and emailRule) using `Schema.Types.StringType()`.
Example 2: Simple Login Form Input with custom validations
Javascript
import React, { useState } from "react"; import { Form, Button, ButtonToolbar, Schema, InputGroup, } from "rsuite"; import EyeIcon from "@rsuite/icons/legacy/Eye"; import EyeSlashIcon from "@rsuite/icons/legacy/EyeSlash"; import "rsuite/dist/rsuite.min.css"; import "./App.css"; function App() { const { StringType } = Schema.Types; const model = Schema.Model({ password: StringType().isRequired( "This field is required." ), email: StringType() .isEmail("Please enter a valid email address.") .isRequired("This field is required."), }); const [visible, setVisible] = useState(false); const handleChange = () => { setVisible(!visible); }; return ( <> <Form model={model}> <Form.Group controlId="email"> <Form.ControlLabel> Email </Form.ControlLabel> <Form.Control name="email" type="email" /> </Form.Group> <Form.Group controlId="password"> <Form.ControlLabel> Password </Form.ControlLabel> <InputGroup> <Form.Control name="password" type={ visible === false ? "password" : "text" } /> <InputGroup.Addon onClick={handleChange} > {visible ? ( <EyeIcon /> ) : ( <EyeSlashIcon /> )} </InputGroup.Addon> </InputGroup> </Form.Group> <ButtonToolbar> <Button appearance="primary" type="submit" > Login </Button> </ButtonToolbar> </Form> </> ); } export default App; |
Output: This example demonstrates a login form with an email and password input fields. The password input field also includes a toggle button to show/hide the password using the visible state. The custom validation rules are defined using Schema.Types.StringType().Output
Reference: https://rsuitejs.com/components/form-validation/#form-validation
