Semantic-UI Input Variations
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. The user might need to show different inputs in different variations according to his requirements. To depict an input data significance, its variation can vary.
Semantic UI Input Variations:
- icon: This variation is used to specify icons to inputs.
- labeled: This variation is used to specify labels to inputs.
- action: This variation is used to relate input with an action button.
- transparent: This variation is used to specify the transparent variation of inputs.
- inverted: This variation is used to make the input inverted (color-wise).
- fluid: This variation is used to make input take the full size of its container.
- size: This variation is used to make input vary in size.
Example 1: The following code also demonstrates the above input variations.
Example 2: The following code also demonstrates some other input variations.