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 the user. We can group a set of input fields of different types such as text, password, number, etc in a form. Let's have a look at various Form States.

Semantic UI Form States:

• Loading: We can keep the form in a loading state if we are waiting for a response from a server or an API.
• Success: This state indicates that the data entered by the user is correct and the form is successfully submitted to the server or an API.
• Error: This state indicates that the data entered by the user is incorrect and the form is not successfully submitted to the server or an API.
• Warning: This state indicates that a part of the data entered by the user is incorrect or inaccurate and the form may resort to errors when submitted to the server or an API.
• Field Error: Field Error State can be helpful in specifically pointing out the fields incorrectly entered by the user.
• Disabled Field: A Field in a form is disabled as the data entered by the user already covers or is unrelated to the particular field.
• Read-Only Field: Forbids the user from entering information into the field.

Syntax:

<div class="ui Loading-State Success-State 
 Error-State Warning-State form">
 <div class="Field-Error-State Disabled-Field-State">
 ...
 </div>
 ...
</div>

Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.

Example 1: In the below example, we have created a loading form.

Output:

👁 Image

Example 2: In the below example, we have created a success form.

Output:

👁 Image

Example 3: In the below example, we have created an error form.

Output:

👁 Image

Example 4: In the below example, we have created a warning form.

Output:

👁 Image

Example 5: In the below example, we have created a form with a field error.

Output:

👁 Image

Example 6: In the below example, we have created a form with a disabled field.

Output:

👁 Image

Example 7: In the below example, we have created a form with a read-only field.

Output:

👁 Image

Reference: https://semantic-ui.com/collections/form.html