ReactJS Evergreen Radio Component

ReactJS Evergreen Introduction

Last Updated : 28 Apr, 2022

Evergreen is the React UI framework that is used to create amazing web pages. Evergreen is made up of multiple components, which we can easily import one by one according to users' requirements. Evergreen is an open-source tool that we can easily install. It serves a flexible framework and a lot of its visual design.

Creating React Application And Installing Module:

Step 1: Primarily, You have to create react app:

npx create-react-app appname

Step 2: change the directory to appname using the following command.

cd appname

Step 3: Evergreen is made up of multiple components and tools, which you can import one by one. It can be installed with NPM or Yarn using the following command.

npm i evergreen-ui
// or
yarn add evergreen-ui

Once Evergreen is installed as a dependency in your project, you can import it as

import { Button } from 'evergreen-ui';

Project Structure: Now, the app structure will look like this:

Example 1: This example describes how to create radio button component.

App.js

import React, { useState } from 'react'
import { RadioGroup } from 'evergreen-ui'

export default function App() {
    const [ageGroup, setAgeGroup] = useState('0-10 years')
    const [options] = useState([
        { label: 'radio1', value: 'radio1' },
        { label: 'radio2', value: 'radio2' },
        { label: 'radio3', value: 'radio3' },
        { label: 'radio4', value: 'radio4' },
        { label: 'radio5', value: ' radio5' },
    ])
    return (
        <div style={{ paddingLeft: 30 }}>
            <h2>Radio Component</h2>
            <RadioGroup
                value={ageGroup}
                options={options}
                onChange={e => setAgeGroup(e.target.value)}
            />
        </div>
    );
}

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Example 2: This example describes how to create textarea component.

App.js

import React, { useState } from 'react'
import { Textarea } from 'evergreen-ui'

export default function App() {

    return (
        <div style={{ padding: "50px" }}>
            <h2>Enter Your text here</h2>
            <Textarea name="textarea-1" 
                placeholder="Textarea placeholder..." />
        </div>
    );
}

Output:

ReactJS Evergreen Radio Component

kartik

Improve

Article Tags :

ReactJS

Similar Reads

React Introduction

ReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability.It is developed and maintained by Facebook.The latest version of React is React 19.Uses

ReactJS Evergreen Pagination Component

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Pagination Component allows the user to navigate between pages. A user can select a specific page from a range of pages. We

ReactJS Evergreen Radio Component

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Radio Component allows the user to select one option from a set or list of items. We can use the following approach in Reac

React Rebass Introduction

React Rebass is a front-end framework that was designed keeping react in mind. React Rebass is built with a Styled System. It is the best choice to create prototypes and UI without needing to invest time in building a custom design system up-front. React Rebass provides us with flexible components.

ReactJS Evergreen Positioner Component

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Positioner Component allows the user to position an element to an anchor. It is a utility component. We can use the followi

ReactJS Evergreen Menu Component

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Menu Component allows the user to show a list of actions that the user can take. We can use the following approach in React

Introduction to React-Redux

React-Redux is a popular state management library that helps manage the application state in React applications. It is an essential tool in the React ecosystem, allowing you to efficiently handle complex state logic and data flow within large applications. React-Redux connects the Redux store to Rea

ReactJS Evergreen Portal Component

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Portal Component provides a way for the user to render outside the current DOM tree. It is a simple utility component that

ReactJS Evergreen FormField Component

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. FormField Component allows the user to use it as a utility component to help compose form fields We can use the following a

ReactJS Evergreen Filepicker Component

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Filepicker Component allows the user to select one or multiple files from the file system. We can use the following approac