Open In App

React Rebass Forms Label Component

Last Updated : 10 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Label Component in React Rebass. The Label is an important component that is required in each development. So to create a Label component, we can import the Rebass Label component.

Form Label component is used to display content classification.

Syntax:

<Label>
Label
</Label>

Creating React Application And Installing Module:

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: Install React Rebass and form components in your given directory.

npm install rebass
npm i @rebass/forms

Project Structure: It will look like the following.

Folder Structure

Example 1: This is the basic example that shows how to use the Form label component.

App.js




import React from "react";
import { Text } from "rebass";
import { Label, Input } from "@rebass/forms";
 
const gfg = () => {
    return (
        <div id="gfg">
            <Text fontSize={[3, 4, 5]} fontWeight="bold"
            color="green" ml="42%">
                Geeksforgeeks
            </Text>
            <Text fontSize={[1, 2, 3]} fontWeight="bold"
            color="black" ml="41%">
                Rebass Label Component
            </Text>
            <br />
            <Label htmlFor="gfg">Label:</Label>
            <Input id="gfg" name="name"
            defaultValue="GeeksforGeeks" />
        </div>
    );
};
 
export default gfg;


Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Output:

Forms Label Component

Reference: https://rebassjs.org/forms/label


Previous Article
Next Article

Similar Reads

React Rebass Forms Textarea Component
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Textarea Component in React Rebass. The Textarea is an important component that is required in each development. So to create a Textarea component, we can import the Rebass Textarea component. Form Textarea component is used to ma
2 min read
React Rebass Forms Select Component
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Select Component in React Rebass. Select is an important component that is required in each development. So to create a Select component, we can import the Rebass Select component. Form Select component is used to make a component
2 min read
React Rebass Forms Input Component
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Input Component in React Rebass. The Input is an important component that is required in each development. So to create an Input component, we can import the Rebass Input component. Form Input component is used to make an input wh
2 min read
React Rebass Forms Switch Component
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Switch Component in React Rebass. The Switch is an important component that is required in each development. So to create a Switch component, we can import the Rebass Switch component. Form Switch component is used to make an acce
2 min read
React Rebass Forms Slider Component
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Slider Component in React Rebass. The Slider is an important component that is required in each development. So to create a Slider component, we can import the Rebass Slider component. Form Slider component is used to make an acce
2 min read
React Rebass Forms Checkbox Component
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Checkbox Component in React Rebass. The checkbox is an important component that is required in each development. So to create a Checkbox component, we can import the Rebass Checkbox component. Form Checkbox component is used to ma
2 min read
React Rebass Forms Radio Component
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Radio Component in React Rebass. The Radio is an important component that is required in each development. So to create a Radio component, we can import the Rebass Radio component. Form Radio component is used to make an accessibl
2 min read
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 p
1 min read
React Rebass Link Component
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know how to use Link Component in React Rebass. The Link is an important component that is required in each development. So to create a Link component we can import the Rebass Link component. The link component is used to make create a link that
2 min read
React Rebass Button Component
React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will see how to use Button Component in React Rebass. The button is an important component that is required in each development. So to create a button component, we can import the Rebass Button component. In Rebass Button component, there are lots of
2 min read