Easily create nicely looking forms with different styles and layouts.

\n\n

Usage

\n\n

To apply this component, add the .uk-form class to a form element. All form control elements are placed side by side within the next row.

\n\n

Example

\n\n
\n\n
\n Form\n \n \n \n \n \n
\n\n
\n\n

NOTE In this example we used a button from the Button component. To add a top margin to form elements, when they stack on smaller viewports, just add the data-uk-margin attribute from the Utility component to the parent element.

\n\n

Markup

\n\n
<form class="uk-form">\n\n    <fieldset data-uk-margin>\n        <legend>...</legend>\n        <input type="text" placeholder="">\n        <input type="password" placeholder="">\n        <select>\n            <option>...</option>\n            <option>...</option>\n        </select>\n        <button class="uk-button">...</button>\n        <label><input type="checkbox"> ...</label>\n    </fieldset>\n\n</form>
\n\n
\n\n

Rows

\n\n

Add the .uk-form-row class to a <div> element to stack form controls.

\n\n

Example

\n\n
\n\n
\n Legend\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n\n
\n\n

Markup

\n\n
<form class="uk-form">\n    <fieldset>\n        <legend>...</legend>\n        <div class="uk-form-row">...</div>\n        <div class="uk-form-row">...</div>\n    </fieldset>\n</form>
\n\n
\n

Control states

\n

Provide the user with basic information through feedback states on form controls.

\n\n

Disabled

\n\n

Add the disabled attribute to a form control and it will be appear muted.

\n\n

Example

\n\n
\n \n \n
\n\n

Markup

\n\n
<input type="text" placeholder="" disabled>
\n\n
\n\n

Validation states

\n\n

Add the .uk-form-danger or .uk-form-success class to a form control to notify the user, whether or not the value is validated.

\n\n

Example

\n\n
\n
\n \n
\n
\n \n
\n
\n\n

Markup

\n\n
<input type="text" placeholder="" class="uk-form-danger">\n<input type="text" placeholder="" class="uk-form-success">
\n\n
\n\n

Control modifiers

\n\n

Size modifiers

\n\n

Add the .uk-form-large or .uk-form-small class to an <input>, <select> or <textarea> element to make it smaller or larger.

\n\n

Example

\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n\n
\n\n

Markup

\n\n
<input type="text" placeholder="" class="uk-form-large">\n<input type="text" placeholder="" class="uk-form-small">
\n\n
\n\n

Width modifiers

\n\n

Add the .uk-form-width-large, .uk-form-width-medium, .uk-form-width-small or .uk-form-width-mini class to an <input>, <select> or <textarea> element to adjust its width.

\n\n

Example

\n\n
\n\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n\n
\n\n

Markup

\n\n
<input type="text" placeholder="" class="uk-form-width-large">\n<input type="text" placeholder="" class="uk-form-width-medium">\n<input type="text" placeholder="" class="uk-form-width-small">\n<input type="text" placeholder="" class="uk-form-width-mini">
\n\n

You can also apply the .uk-width-* classes from the Grid component to form controls. This is especially useful, if you want form controls to extend to the full width of their parent container.

\n\n

Example

\n\n
\n\n \n\n
\n\n

Markup

\n\n
<input type="text" placeholder="" class="uk-width-1-1">
\n\n
\n\n

Form blank

\n\n

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

\n\n

Example

\n\n
\n
\n \n
\n
\n\n

Markup

\n\n
<input type="text" placeholder="" class="uk-form-blank">
\n\n
\n\n

Help text

\n\n

Use the .uk-form-help-inline or .uk-form-help-block class to add inline and block level help text for the controls.

\n\n

Example

\n\n
\n\n
\n The .uk-form-help-inline class creates spacing to the left.\n
\n\n
\n \n

The .uk-form-help-block class creates an associated paragraph.

\n
\n\n
\n\n

Markup

\n\n
<div class="uk-form-row">\n    <input type="text" placeholder=""> <span class="uk-form-help-inline">...</span>\n</div>\n\n<div class="uk-form-row">\n    <textarea cols="" rows="" placeholder="">...</textarea>\n    <p class="uk-form-help-block">...</p>\n</div>
\n\n
\n\n

Layout modifiers

\n\n

There are two layout modifiers available: .uk-form-stacked and .uk-form-horizontal. Both require form controls to be wrapped with the .uk-form-row class in order to stack them. Labels need the .uk-form-label class and controls must be wrapped in the .uk-form-controls class.

\n\n

Markup

\n\n
<form class="uk-form uk-form-stacked">\n    <div class="uk-form-row">\n        <label class="uk-form-label" for="">...</label>\n        <div class="uk-form-controls">...</div>\n    </div>\n</form>
\n\n

NOTE Layout modifiers can also be added to a <fieldset> element. This means, if you use fieldsets, you can have different form layouts for each fieldset.

\n\n
\n\n

Form stacked

\n\n

Add the .uk-form-stacked class to display labels on top of controls.

\n\n

Example

\n\n
\n\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n\n
\n \n
\n \n
\n
\n\n
\n \n
\n \n
\n
\n
\n Radio input\n
\n
\n \n \n \n
\n
\n
\n Checkbox input\n
\n
\n \n \n \n
\n
\n
\n Mixed controls\n
\n \n \n \n \n
\n
\n\n
\n\n
\n\n

Form horizontal

\n\n

Add the .uk-form-horizontal class to display labels and controls side by side.

\n\n

Example

\n\n
\n\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n\n
\n Radio input\n
\n
\n \n \n \n
\n
\n
\n Checkbox input\n
\n
\n \n \n \n
\n
\n
\n Mixed controls\n
\n \n \n \n \n
\n
\n\n
\n\n
\n\n

Text in form controls

\n\n

If you use text and checkboxes or radio buttons in form controls, just add the .uk-form-controls-text class to align the text properly.

\n\n

Markup

\n\n
<div class="uk-form-controls uk-form-controls-text">...</div>
\n\n
\n\n

Vertical spacing in form controls

\n\n

If you create paragraphs in form controls, add the .uk-form-controls-condensed class to reduce spacing.

\n\n

Example

\n\n
\n
\n Mixed controls\n
\n

\n \n \n \n \n

\n

\n \n \n \n

\n
\n
\n\n
\n\n

Markup

\n\n
<div class="uk-form-controls uk-form-controls-text">\n    <p class="uk-form-controls-condensed">...</p>\n    <p class="uk-form-controls-condensed">...</p>\n</div>
\n\n
\n\n

Form and grid

\n\n

This is an example of how to use forms with the Grid component.

\n\n

Example

\n\n
\n\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n\n
\n\n

Markup

\n\n
<form class="uk-form">\n\n    <div class="uk-grid">\n        <div class="uk-width-1-2"><input type="text" placeholder="" class="uk-width-1-1"></div>\n        <div class="uk-width-1-4"><input type="text" placeholder="" class="uk-width-1-1"></div>\n        <div class="uk-width-1-4"><input type="text" placeholder="" class="uk-width-1-1"></div>\n    </div>\n\n</form>
\n\n
\n\n

Form and icons

\n\n

This is an example of how to add an icon from the Icon component to a form.

\n\n

Example

\n\n
\n\n
\n \n \n
\n
\n \n \n
\n\n
\n\n

Markup

\n\n
<div class="uk-form-icon">\n    <i class="uk-icon-calendar"></i>\n    <input type="text">\n</div>
\n\n
\n\n

Form advanced