React Rebass Forms Complete Reference

React Rebass is a front-end framework that was designed keeping react in mind. Accessible and themeable form components for use with Rebass. Forms are generally used when you want to collect data from the user.

For example, a user wants to buy a bag online, so he/she has to first enter their shipping address in the address form and then add their payment detail in the payment form to place an order.

• React Rebass Forms Label Component
• React Rebass Forms Input Component
• React Rebass Forms Select Component
• React Rebass Forms Textarea Component
• React Rebass Forms Radio Component
• React Rebass Forms Checkbox Component
• React Rebass Forms Slider Component
• React Rebass Forms Switch Component

Javascript

import React from "react";
import { Label, Input } from "@rebass/forms";

function App() {
  return (
    <div style={{ display: "block", width: 500, padding: "100px" }}>
      <box>
        <Label htmlFor="name">Name</Label>
        <Input id="name" name="name" type="text" defaultValue="john" />
        <Label htmlFor="email">Email Id</Label>
        <Input
          id="email"
          name="email"
          type="email"
          defaultValue="john@example.com"
        />
        <Label htmlFor="password">Password</Label>
        <Input id="password" name="password" type="password" />
      </box>
    </div>
  );
}

export default App;

Output: