Semantic UI Input is a form component in the Semantic UI framework, which allows users to input text values. In this tutorial, we will explore the syntax, example, output, explanation, use, and important points of the Semantic UI Input component.
<div class="ui input">
<input type="text" placeholder="Enter text here...">
</div>
Here's an example of using Semantic UI Input component.
Here are some common image input states and how they might be implemented in a Semantic UI context.
<!-- Focus -->
<div class="ui input focus">
<input type="text" placeholder="Search...">
</div>
<!-- Loading -->
<div class="ui left icon input loading">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
<!-- Disabled -->
<div class="ui disabled input">
<input type="text" placeholder="Search...">
</div>
<!-- Error -->
<div class="ui input error">
<input type="text" placeholder="Search...">
</div>
An input can be formatted with an icon
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search icon"></i>
</div>
<div class="ui left icon input">
<input type="text" placeholder="Search users...">
<i class="users icon"></i>
</div>
An input can be formatted with a label
<div class="ui labeled input">
<div class="ui label">
http://
</div>
<input type="text" placeholder="mysite.com">
</div>
<div class="ui right labeled input">
<input type="text" placeholder="Find domain">
<div class="ui dropdown label">
<div class="text">.com</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">.com</div>
<div class="item">.net</div>
<div class="item">.org</div>
</div>
</div>
</div>
<div class="ui right labeled input">
<label for="amount" class="ui label">$</label>
<input type="text" placeholder="Amount" id="amount">
<div class="ui basic label">.00</div>
</div>
<div class="ui right labeled left icon input">
<i class="tags icon"></i>
<input type="text" placeholder="Enter tags">
<a class="ui tag label">
Add Tag
</a>
</div>
<div class="ui left corner labeled input">
<input type="text" placeholder="Search...">
<div class="ui left corner label">
<i class="asterisk icon"></i>
</div>
</div>
<div class="ui corner labeled input">
<input type="text" placeholder="Search...">
<div class="ui corner label">
<i class="asterisk icon"></i>
</div>
</div>
An input can take the size of its container.
<div class="ui mini icon input">
<input type="text" placeholder="Search mini...">
<i class="search icon"></i>
</div>
<div class="ui small icon input">
<input type="text" placeholder="Search small...">
<i class="search icon"></i>
</div>
<div class="ui large icon input">
<input type="text" placeholder="Search large...">
<i class="search icon"></i>
</div>
<div class="ui big icon input">
<input type="text" placeholder="Search big...">
<i class="search icon"></i>
</div>
<div class="ui huge icon input">
<input type="text" placeholder="Search huge...">
<i class="search icon"></i>
</div>
<div class="ui massive icon input">
<input type="text" placeholder="Search massive...">
<i class="search icon"></i>
</div>
The Semantic UI Input component is designed to allow users to input text values in forms. It is based on the input element and can be augmented with other from the framework, such labels and buttons.
Semantic UI Input component can be used in forms where text input is required, such as login forms, registration forms, and search forms.
input element and can be augmented with other elements from the framework, such as labels and buttons.In this tutorial, we explored the syntax, example, output, explanation, use, and important points of the Semantic UI Input component. The Semantic UI Input component is designed to allow users to input text values in forms, and it is based on the input element. It can be augmented with other elements from the framework to add additional functionality, such as labels and buttons.