Semantic-UI Input Focus State Last Updated : 08 Mar, 2022 Comments Improve Suggest changes Like Article Like Report Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic-UI Input class is used to create a basic input User Interface. The Semantic-UI Input Focus State is used to display the focus on the input field i.e. it represents the user currently interacting with the form element. Semantic-UI Input Focus State Used Class: focus: This class is used to display the focus on the input field. Syntax: <div class="ui input focus"> ... </div> Example 1: In this example, we will describes the use of Semantic-UI Input Focus State. HTML <!DOCTYPE html> <html> <head> <title> Semantic-UI Input Focus State </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Input Focus State</h3> <div class="ui input focus"> <input type="text" placeholder="First Name"> </div> <div class="ui input"> <input type="text" placeholder="Last Name"> </div> <br><br> <div class="ui input"> <input type="text" placeholder="Email Id"> </div> <div class="ui input"> <input type="text" placeholder="Password"> </div> </div> </body> </html> Output: Semantic-UI Input Focus State Example 2: In this example, we will describe the use of Semantic-UI Input Focus State. HTML <!DOCTYPE html> <html> <head> <title> Semantic-UI Input Focus State </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui center aligned container"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Input Focus State</h3> <div class="ui input icon focus"> <input type="text" placeholder="User name"> <i class="user icon"></i> </div> <br><br> <div class="ui icon input"> <input type="email" placeholder="Email Id"> <i class="search icon"></i> </div> <br><br> <div class="ui icon input"> <input type="password" placeholder="Password"> <i class="eye icon"></i> </div> </div> </body> </html> Output: Semantic-UI Input Focus State Reference: https://semantic-ui.com/elements/input.html#focus Comment More infoAdvertise with us Next Article Semantic-UI Input Focus State P ppatelkap Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Input States Semantic UI is an open-source framework that offers us special classes to create stunning and responsive user interfaces. It makes use of jQuery and CSS to create pleasant user interfaces that are very much like bootstrap. It has many classes which are used for styling different elements in the HTML 3 min read Semantic-UI Input Error State Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI has a bunch of components for user interface design. One of them is “Inpu 3 min read Semantic-UI Input Disabled State Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI has a bunch of components for user interface design. One of them is the I 3 min read Semantic-UI Form Loading State Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. A form is the section of a document that cont 3 min read Semantic-UI Input Types Semantic UI is an open-source front-end development framework similar to Bootstrap to design an attractive web page. It has lots of components that help to create an attractive and responsive website layout. Semantic-UI Input is a field that is used to get input from the users. Input type define the 1 min read Semantic-UI Input Loading State Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic-UI Input class is used to create a basic in 2 min read Semantic-UI Form States Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to make your website look more amazing. It uses a class to add CSS to the elements. Forms provide us with a way to take input from t 5 min read Semantic-UI Menu States Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to make your website look more amazing. It uses a class to add CSS to the elements. The menu is used to group items that are used to 2 min read Semantic-UI Comment States Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Comments are an excellent way to display 3 min read Semantic-UI Segment States Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style the web app instead of using CS 2 min read Like