ReactJS Semantic UI Input Element Last Updated : 13 Jun, 2021 Comments Improve Suggest changes Like Article Like Report 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 startOutput: 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 Step to Run Application: Run the application using the following command from the root directory of the project: npm startOutput: Now open your browser and go to http://localhost:3000/, you will see the following output: Reference: https://react.semantic-ui.com/elements/input Comment More infoAdvertise with us Next Article ReactJS Semantic UI Input Element taran910 Follow Improve Article Tags : Web Technologies ReactJS Semantic-UI Similar Reads ReactJS Semantic UI List Element 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 know how to use the List element in React 2 min read ReactJS Semantic UI Rail Element 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 know how to use rail element in ReactJS S 2 min read ReactJS Semantic UI Label Element 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 know how to use label elements in ReactJS 3 min read ReactJS Semantic UI Step Element 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 know how to use the step element in React 2 min read ReactJS Semantic UI button Element 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 and jQuery to incorporate in different frameworks. In this article, we will know how to use button element in ReactJS Sema 2 min read ReactJS Semantic UI Placeholder Element 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 know how to use Placeholder element in Re 2 min read ReactJS Semantic UI container Element 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 know how to use Container elements in Re 2 min read ReactJS Semantic UI Portal Addons 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 and JQuery languages to incorporate them into different frameworks. In this article, we will find out how to use Portal Ad 2 min read ReactJS Semantic UI Form collections 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 know how to use form collections in React 3 min read ReactJS Semantic UI Item Views 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 know how to use Item Views in ReactJS Se 2 min read Like