UIkit Form– UIkit provides classes to create beautiful form with different styles. Here in this article we are going to explain how you can use pre defined classes to create form elements. You can also use our online editor to edit and run the code online.
UIkit Form | Input | Controls Example
Let us create a simple form with basic elements.
If you run the above example it will produce output something like this-
Input Classes
Following classes are available which you can use to create form elements.
| Name | Class | Description |
|---|---|---|
| Input | .uk-input | This is input class, add to <input> elements. |
| Select Box | .uk-select | This is select class, add this to <select> elements. |
| Textarea | .uk-textarea | This is textarea class, add this to <textarea> elements. |
| Radio Button | .uk-radio | This is radio button class, add this to <input type=”radio”> elements. |
| Checkbox | .uk-checkbox | This class is used to create checkboxes, Add this class to <input type=”checkbox”> elements. |
| Range | .uk-range | This class is used to create range element add this to range element <input type=”range”>. |
State Modifiers
Following state modifier classes are available-
| Class | Description |
|---|---|
| .uk-form-danger | This is used to represent the danger state such as error message. |
| .uk-form-success | This is used to reresent that action has been successfully performed. |
Now let us create a simple example.
If you run the above example it will produce output something like this-
Size Modifiers
You can change the size of form elements using the following modifiers-
| Class | Description |
|---|---|
| .uk-form-large | This is used to create large elements. |
| .uk-form-small | This is used to create small elements. |
You can use the above classes simply as below-
If you run the above example it will produce the output something like this-
Width Modifiers
Using with modifiers we can create large, medium, small and extra small elements. You can modify width of input, select, textarea or other elements using this modifier. Here is an example of width modifier.
If you run the above example it will produce output something like this-
Layout Controls | Horizontal | Vertical Form
You can add labels, controls to stacked or horizontal layout.
| Class | Description |
|---|---|
| .uk-form-stacked | This is used to display lables top of controls. |
| .uk-form-horizontal | This is used to display the labels & controls side by side. |
| .uk-form-label | This is used to define the label. |
| .uk-form-controls | Define the form controls. |
Vertical Form | Stacked Form
Class .uk-form-stacked is used to create stacked form.
If you run the above example it will produce output something like this-
Horizontal Form
Add class uk-form-horizontal to create horizontal form in UIkit. Here is an example of horizontal form.
Output of above example-
Add Icon To Input
You can add icons simply as below-
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: user"></span>
</div>
Custom Controls
You can create custom controls such as file, select dropdown box.
File
You can create custom select upload box simply as below-
Select Dropdown Box
You can replace the default select dropdown by uikit design simply as below-
<div class="uk-margin">
<div uk-form-custom="target: true">
<span></span>
</div>
</div>