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






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

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

Radio input




Checkbox input




Mixed controls





Form horizontal

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

Example

Radio input




Checkbox input




Mixed controls





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






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

Testimonials

  • P Dave

    Reliable tenants made being landlord stress free. Besides being professional they are also well versed with nitty-gritties of Landlord tenant issue. As a first time landlord they helped me understand the the importance of choosing a right tenant. I always recommend Reliabletenants to my colleagues & friends.

  • Preet A

    My investment properties keep on changing but Reliabletenants are constant. With them at the helm I go about my work / travel abroad / go on vacations with a complete peace of mind. For all those investors out there, I strongly recommend reliabletenants.ca.

  • Robert Polski

    "You guys are so good! You guys actually exceeded my expectations from a Realtor!"

  • B & J smith

    I am thankful to my friend for recommending reliabletenants.ca and I in turn referred them to everyone I know. The reason is obvious. They are one of the finest, most knowledgeable and most respected agents I have ever met. They provide an excellent service. But don’t just read this, try them out for yourself. You’ll see.”

  • SAAD ABDO

    I want to let you know that we were really happy with reliabletenants.ca for sheltering us from all the unpleasent issues of being a landlord. we would definitely keep you in our mind for our next project

  • A & F Sultan

    "It is our pleasure to express thanks to reliabletenants.ca for giving us peace of mind. I was tired & overwhelmed with various issues arising & was ready to sell my property. I am more than happy to have retained my investment property. I would recommend reliabletenants without any reservations or second thoughts to our friends and family."

  • Odombo P.

    Reliabletenants are reliables themselves – Take it from me. They are looking after Mine & my relatives properties. So far no issues. Hopefully it continues in future too.

  • LE NGUYEN

    Reliabletenants are reliables themselves – Take it from me. They are looking after Mine & my relatives properties. So far no issues. Hopefully it continues in future too.

  • T PIETOWSKI

    I wish I had listened to reliabletenants.ca when they told me to transfer all utility bills to tenant, I didn't follow their advice & had to suffer because of the same. From then on I follow their suggestions to T.

  • Rajiv

    Reliabletenants.ca are a group of good folks. Everyone knows their role which in turn makes things very present for Landlord. Happy:)

Social

Logout