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.

	

	    
	
	

	    
		Option 1
		Option 2
                Option 3
	    
	
	

	    
	

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.

State Modifiers

Following state modifier classes are available-

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-

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.

Vertical Form | Stacked Form

Class .uk-form-stacked is used to create stacked form.

    

        Name
        

            
        
    
	

        Email
        

            
        
    

    

        Gender
        

            
                Male
                Female
            
        
    

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.

    

        Name
        

            
        
    
	

        Email
        

            
        
    

    

        Gender
        

            
                Male
                Female
            
        
    

Output of above example-

Add Icon To Input

You can add icons simply as below-

Custom Controls

You can create custom controls such as file, select dropdown box.

File

You can create custom select upload box simply as below-

   

        Upload File
        

            
            upload
        
    

Select Dropdown Box

You can replace the default select dropdown by uikit design simply as below-

 

        

            
                Option 01
                Option 02
                Option 03
            
            
        
    

UIkit Button UIkit provides classes to create beautiful buttons. You can create various type of buttons using predefined classes. Here in this article we are going to explain how to create UIkit buttons.

UIkit Button Example

To create a button add class .uk-button and modifier class uk-button-default.-

My Button

Style Modifiers

Following style modifiers are available which we can use to create beautiful buttons.

Example

Let us create an example to understand the above modifiers.

Default Button
Primary Button
Secondary Button
Danger Button
Text Button
Link Button

If you run the above example it will produce output something like this-

Size Modifiers

You can use following size modifiers to change the button size.

• Small Button– Class uk-button-small is used to create small button.
• Large Button– Class uk-button-large is used to create large button.

Default Size button
   
Small Size button

Large Size button   

If you the above example it will produce the output something like this-

Width Modifiers

You can use width modifiers to create block level buttons. Add class uk-width-1-1 to make button full width.

Button
Button
Button

Output of above example-

Button Group

Add a div wrapper with class uk-button-group to create button groups.

    Button 1
    Button 2
    Button 3

Button with Dropdown

You can create buttons with dropdown in UIkit framework using predefined classes. Here is an example of dropdown button with nav header and nav divider.

    My Dropdown
    

        

            
Active Item 
            
Item 1
            
Header
            
Item 2
            
Item 3
            

            
Item 4
        
    

UIkit Align– This component allows us to control the alignment of elements. Here in this tutorial, we are going to explain how to align elements in UIkit. You can also use online editor to edit and run the code online.

UIkit Align Text | Image Left | Right | Center Component Example

You can use following classes to align Text/Element/Image in UIkit-

1. uk-align-left– This is used to float left with right and bottom margin.
2. uk-align-right– This is used to align right with left and bottom margin.
3. uk-align-center– This is used to center the element and adds the bottom margin.

Here is an example of alignment classes

Align Left


Align Right


Align Center

If you run the above example it will produce the output something like this-

Responsive Classes

Following responsive classes are available which will work on Only specific devices.

UIkit Alert– UIkit uk-alert component is used to create alert messages such as success, warning and error. It is very simple to use this component. Here in this article we are going to explain how to use alert component in UIkit.

UIkit Alert Component Example

There are following Types of Alert boxes available in UIkit-

1. Primary
2. Success
3. Warning
4. Danger

Add uk-alert attribute to block element to create alert messages.-

Your order has been received.

If you run the above example it will produce the output something like this-

Close Button

Add class uk-alert-close and attribute uk-close to create close button.

Primary Alert

Add class uk-alert-primary along with attribute uk-alert.

    
    
Primary Alert Example.

If You run the above example it will produce the output something like this-

Success Alert

Add class uk-alert-success along with attribute uk-alert.

    
    
Success Alert Example.

Output of above example will be-

Warning Alert

Add class uk-alert-warning along with attribute uk-alert.

    
    
Warning Alert Example.

Output of above example will be-

Danger Alert

Add class uk-alert-danger along with attribute uk-alert.

    
    
Danger Alert Example.

Output of above example will be-

Component Options

JavaScript

Initialization

UIkit.alert(element, options);

Events

• beforehide– This event fires before hide.
• hide– Fires when an item is hidden.

Methods

Following methods are available-

Close

UIkit.alert(element).close();