Easily create nicely looking forms with different styles and layouts.
Usage
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.
Example
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.
Markup
<form class="uk-form">
<fieldset data-uk-margin>
<legend>...</legend>
<input type="text" placeholder="">
<input type="password" placeholder="">
<select>
<option>...</option>
<option>...</option>
</select>
<button class="uk-button">...</button>
<label><input type="checkbox"> ...</label>
</fieldset>
</form>
Rows
Add the .uk-form-row
class to a <div>
element to stack form controls.
Example
Markup
<form class="uk-form">
<fieldset>
<legend>...</legend>
<div class="uk-form-row">...</div>
<div class="uk-form-row">...</div>
</fieldset>
</form>
Control states
Provide the user with basic information through feedback states on form controls.
Disabled
Add the disabled
attribute to a form control and it will be appear muted.
Example
Markup
<input type="text" placeholder="" disabled>
Validation states
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.
Example
Markup
<input type="text" placeholder="" class="uk-form-danger">
<input type="text" placeholder="" class="uk-form-success">
Control modifiers
Size modifiers
Add the .uk-form-large
or .uk-form-small
class to an <input>
, <select>
or <textarea>
element to make it smaller or larger.
Example
Markup
<input type="text" placeholder="" class="uk-form-large">
<input type="text" placeholder="" class="uk-form-small">
Width modifiers
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.
Example
Markup
<input type="text" placeholder="" class="uk-form-width-large">
<input type="text" placeholder="" class="uk-form-width-medium">
<input type="text" placeholder="" class="uk-form-width-small">
<input type="text" placeholder="" class="uk-form-width-mini">
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.
Example
Markup
<input type="text" placeholder="" class="uk-width-1-1">
Form blank
Add the .uk-form-blank
class to minimize the styling of form controls.
Example
Markup
<input type="text" placeholder="" class="uk-form-blank">
Help text
Use the .uk-form-help-inline
or .uk-form-help-block
class to add inline and block level help text for the controls.
Example
Markup
<div class="uk-form-row">
<input type="text" placeholder=""> <span class="uk-form-help-inline">...</span>
</div>
<div class="uk-form-row">
<textarea cols="" rows="" placeholder="">...</textarea>
<p class="uk-form-help-block">...</p>
</div>
Layout modifiers
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.
Markup
<form class="uk-form uk-form-stacked">
<div class="uk-form-row">
<label class="uk-form-label" for="">...</label>
<div class="uk-form-controls">...</div>
</div>
</form>
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.
Form stacked
Add the .uk-form-stacked
class to display labels on top of controls.
Example
Form horizontal
Add the .uk-form-horizontal
class to display labels and controls side by side.
Example
Text in form controls
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.
Markup
<div class="uk-form-controls uk-form-controls-text">...</div>
Vertical spacing in form controls
If you create paragraphs in form controls, add the .uk-form-controls-condensed
class to reduce spacing.
Example
Markup
<div class="uk-form-controls uk-form-controls-text">
<p class="uk-form-controls-condensed">...</p>
<p class="uk-form-controls-condensed">...</p>
</div>
Form and grid
This is an example of how to use forms with the Grid component.
Example
Markup
<form class="uk-form">
<div class="uk-grid">
<div class="uk-width-1-2"><input type="text" placeholder="" class="uk-width-1-1"></div>
<div class="uk-width-1-4"><input type="text" placeholder="" class="uk-width-1-1"></div>
<div class="uk-width-1-4"><input type="text" placeholder="" class="uk-width-1-1"></div>
</div>
</form>
Form and icons
This is an example of how to add an icon from the Icon component to a form.
Example
Markup
<div class="uk-form-icon">
<i class="uk-icon-calendar"></i>
<input type="text">
</div>