ReactJS Semantic UI Input Element

Last Updated : 13 Jun, 2021

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.

In this article we will see how to use input elements in ReactJS Semantic UI. Input element is used to make a field that will input some text.

States:

Focus: input field looks like it is focus.
Loading: input is loading.
Error: input contains error.
Disabled: input is disabled.

Syntax:

<input placeholder='search' />

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 semantic UI in your given directory.
```
 npm install semantic-ui-react semantic-ui-css
```

Project Structure: It will look like the following.

Example 1: In this example we will use a simple input component with a placeholder props, by using Semantic UI Input element.

App.js

import React from 'react'
import {Input} from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const Btt = () =>( 
<div>
    <br/>
    <Input placeholder='Click to search' />
</div>
)

export default Btt

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

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Example 2: In this example we will use a simple input component which will be disabled by disabled state, and a placeholder props, by using Semantic UI Input element.

App.js

import React from 'react'
import {Input} from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

const Btt = () =>( 
<div>
    <br/>
    <Input disabled placeholder='Click to search' />
</div>
)

export default Btt