Semantic-UI Input States
Last Updated :
01 Jul, 2022
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 web page structure.
Input tags are one of the most important tags in HTML. They form the basis of the <form> tag and help the user to share information with others. Semantic UI has different classes that enhance the UI design of the input tags. The UI and input class create basic input UI. But to use different states of input, we use different classes. Following are the different input states in the Semantic UI input element:
Semantic-UI Input States:
- Focus State: This state is used to show that a user is currently interacting with the input field. To convert an input field to a focus state, we use the “focus” class along with UI and input classes in the parent div.
- Loading state: This state is used to show that the input field is currently loading data. To convert an input field to a loading state, we use the “loading” class along with UI and input classes in the parent div.
- Disabled State: This state is used to show that the input field is disabled. To convert an input field to a disabled state, we use the “disabled” class along with UI and input classes in the parent div.
- Error State: This state is used to show that the input field data is erroneous. To convert an input field to an error state, we use the “error” class along with UI and input classes in the parent div.
Syntax:
<div class="ui state input">
<input type="..."
placeholder="...">
</div>
Below example illustrate the Semantic-UI Input States:
Example1: Following example covers all different states in text input.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
<style>
body{
margin-left: 15px;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic-UI Input States</strong>
</center>
<strong>Default state:</strong>
<div class="ui input">
<input type="text"
placeholder="default">
</div>
<br><br>
<strong>Focus state:</strong>
<div class="ui focus input">
<input type="text"
placeholder="focus">
</div>
<br><br>
<strong>Disabled state:</strong>
<div class="ui disabled input">
<input type="text"
placeholder="disabled">
</div>
<br><br>
<strong>Loading state:</strong>
<div class="ui loading input">
<input type="text"
placeholder="loading">
</div>
<br><br>
<strong>Error state:</strong>
<div class="ui error input">
<input type="text"
placeholder="error">
</div>
</body>
</html>
|
Output:
Semantic-UI Input States
Example 2: Following example covers all different states in different input tags.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
<style>
body{
margin-left: 15px;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic-UI Input States</strong>
</center>
<strong>Loading State text input:</strong>
<div class="ui left icon input loading">
<input type="text"
placeholder="Searching">
<i class="search icon"></i>
</div><br/><br/>
<strong>Disabled State date input:</strong>
<div class="ui disabled input">
<input type="date">
</div><br/><br/>
<strong>Error State file input:</strong>
<div class="ui error input">
<input type="file">
</div>
</body>
</html>
|
Output:
Semantic-UI Input States
Reference: https://semantic-ui.com/elements/input.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...