# Form

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

Form
Checkbox

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

Legend
Checkbox

#### 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

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

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

#### 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

Text input
Password input
Select field
Textarea
Radio input
Radio input
1 2 3
Checkbox input
Checkbox input
1 2 3
Mixed controls
Checkbox input Number input
Select field

### Form horizontal

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

#### Example

Text input
Password input
Select field
Textarea
Radio input
Radio input
1 2 3
Checkbox input
Checkbox input
1 2 3
Mixed controls
Checkbox input Number input
Select field

### 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

Mixed controls

Checkbox input Number input
Select field

Checkbox input Number input
Select field

#### 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>

## Form advanced

The form can be extended through the Form advanced component to style radio and checkbox inputs.