Form

Easily create nice looking forms with different styles and layouts.

Form

Easily create nice looking forms with different styles and layouts.

Usage

Add one of the following classes to form controls inside a <form> element to define them.

ClassDescription
.uk-inputAdd this class to <input> elements.
.uk-selectAdd this class to <select> elements.
.uk-textareaAdd this class to <textarea> elements.
.uk-radioAdd this class to <input type="radio"> elements to create radio buttons.
.uk-checkboxAdd this class to <input type="checkbox"> elements to create checkboxes.
.uk-rangeAdd this class to <input type="range"> elements to create range forms.
<form>
    <select class="uk-select">
        <option></option>
        <option></option>
    </select>
    <textarea class="uk-textarea"></textarea>
    <input class="uk-radio" type="radio">
    <input class="uk-checkbox" type="checkbox">
    <input class="uk-range" type="range">
</form>

Add the .uk-fieldset class to a <fieldset> element and the .uk-legend class to a <legend> element to define a fieldset and a form legend.

States modifiers

Provide the user with basic information through feedback states on form controls by using one of the following classes.

ClassDescription
.uk-form-dangerAdd this class to notify the user that the value is not validated.
.uk-form-successAdd this class to notify the user that the value is validated.

Add the disabled attribute to a form control. It will appear muted.

Size modifiers

Add one of the classes to an <input>, <select> or <textarea> element to modify its size.

ClassDescription
.uk-form-largeAdd this class to make the element larger.
.uk-form-smallAdd this class to make the element smaller.

Width modifiers

Add one of the following classes to an <input>, <select> or <textarea> element to adjust its width.

ClassDescription
.uk-form-width-largeApplies a width of 500px.
.uk-form-width-mediumApplies a width of 200px.
.uk-form-width-smallApplies a width of 130px.
.uk-form-width-xsmallApplies a width of 40px.

You can also apply the .uk-width-* classes from the Width component to form controls.

Blank modifier

Add the .uk-form-blank class to minimize the styling of form controls.

Layout

Define labels and controls and apply a stacked or horizontal layout to form elements. Layout modifiers can be added to any parent element like the <fieldset> element. This makes it possible to have different form layouts for each fieldset.

ClassDescription
.uk-form-stackedAdd this class to display labels on top of controls.
.uk-form-horizontalAdd this class to display labels and controls side by side.
.uk-form-labelAdd this class to define form labels.
.uk-form-controlsAdd this class to define form controls.
<form class="uk-form-stacked">
    <div>
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">…</div>
    </div>
    <div>
        <div class="uk-form-label"></div>
        <div class="uk-form-controls">…</div>
    </div>
</form>

Horizontal form

Use the .uk-form-controls-text class to better align checkboxes and radio buttons when using them with text in a horizontal layout.

<form class="uk-form-horizontal">
    <div>
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">…</div>
    </div>
    <div>
        <div class="uk-form-label"></div>
        <div class="uk-form-controls uk-form-controls-text">…</div>
    </div>
</form>

Form and icons

You use an icon from the Icon component inside a form. Add the .uk-form-icon class to a <span> element. Group it with an <input> element by adding the .uk-inline class from the Utility component to a container element around both. The icon has to come first in the markup. By default, the icon will be placed on the left side of the form. To change the alignment, add the .uk-form-icon-flip class.

<div class="uk-inline">
    <span class="uk-form-icon" uk-icon="icon: user"></span>
    <input class="uk-input">
</div>

Clickable icons

To enable an action, for example opening a modal to pick an image or link, use an <a> or <button> element to create the icon.

<div class="uk-inline">
    <a class="uk-form-icon uk-form-icon-flip" href="" uk-icon="icon: user"></a>
    <input class="uk-input">
</div>

Form and grid

You can also use the Grid and Width components to define the layout of a form.

Custom controls

To replace a file inputs or select forms with your own HTML content, like a button or text, add the uk-form-custom attribute to a container element.

File

Use a button or text as a file input.

<div uk-form-custom>
    <input type="file">
    <button type="button"></button>
</div>

Select

Use a button, text or a link as a select form. Just add the target: SELECTOR option to the uk-form-custom attribute to select where the option value should be displayed. target: true will select the adjacent element in the markup.

<div uk-form-custom="target: true">
    <select>
        <option></option>
        <option></option>
    </select>
    <button type="button"></button>
</div>

Component option

You can add this option to the uk-form-custom attribute. Learn more

OptionValueDefaultDescription
targetCSS selector, BooleanfalseValue display target.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.formCustom(element, options);