Semantic-UI Input Error State
Last Updated :
27 Feb, 2022
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 “Inputs”. Inputs are used for various purposes on a web page. It is useful in taking information from the user in real-time and saving it in a database. Depending on the requirements of the usage of inputs there are different states of inputs. One of them is the error state.
Semantic UI Input Error State is used to show an input as a default error according to his requirements. There might be a flow of wrong data in inputs which the user needs to know. This is when the error state comes in handy.
Semantic UI Input Error State Class:
- error: This class is used to specify the error state of inputs.
Syntax:
<div class="ui error input">
<input type="text" placeholder="">
.........
</div>
Example 1: This example demonstrates the input error state using the error class. You can see the output in the image below which shows labeled error input.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Input Error State</p>
</b>
<hr>
<br />
<div class="ui labeled error input">
<div class="ui label">
Error Input
</div>
<input type="text"
placeholder="Enter your text">
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Input Error State
Example 2: This example demonstrates the input error state using the error class. You can see the output in the image below which shows different error inputs.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Input Error State</p>
</b>
<hr>
<br />
<strong></strong>
<strong>Error State text input : </strong>
<div class="ui error input">
<input type="text"
placeholder="Enter your name here" />
</div>
<br /><br />
<strong>Error State date input : </strong>
<div class="ui error input">
<input type="date" />
</div>
<br /><br />
<strong>Error State local date input :</strong>
<div class="ui error input">
<input type="datetime-local" />
</div>
<br /><br />
<strong>Error State email input :</strong>
<div class="ui error input">
<input type="email"
placeholder="email" />
</div>
<br /><br />
<strong>Error State password input : </strong>
<div class="ui error input">
<input type="password"
placeholder="password" />
</div>
</div>
</body>
</html>
|
Output: You can see that the inputs are in red color as shown in the image below. This depicts something is wrong with this input and alerts the user regarding it.
Semantic-UI Input Error State
Reference: https://semantic-ui.com/elements/input.html#error
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...