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.
.uk-toggle-switchAdd this class to <input type="checkbox"> elements to create toggle switches.
<form>
  <input class="uk-input" type="text" />
  <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.

Copy to clipboard
  • Legend
  • <form>
      <fieldset class="uk-fieldset">
        <legend class="uk-legend">Legend</legend>
    
        <div class="uk-margin">
          <input
            class="uk-input"
            type="text"
            placeholder="Input"
            aria-label="Input"
          />
        </div>
    
        <div class="uk-margin">
          <select class="uk-select" aria-label="Select">
            <option>Option 01</option>
            <option>Option 02</option>
          </select>
        </div>
    
        <div class="uk-margin">
          <textarea
            class="uk-textarea"
            rows="5"
            placeholder="Textarea"
            aria-label="Textarea"
          ></textarea>
        </div>
    
        <div class="uk-grid uk-grid-small uk-margin uk-child-width-auto">
          <label
            ><input class="uk-radio" type="radio" name="radio2" checked /> A</label
          >
          <label><input class="uk-radio" type="radio" name="radio2" /> B</label>
        </div>
    
        <div class="uk-grid uk-grid-small uk-margin uk-child-width-auto">
          <label><input class="uk-checkbox" type="checkbox" checked /> A</label>
          <label><input class="uk-checkbox" type="checkbox" /> B</label>
        </div>
    
        <div class="uk-margin">
          <input
            class="uk-range"
            type="range"
            value="2"
            min="0"
            max="10"
            step="0.1"
            aria-label="Range"
          />
        </div>
      </fieldset>
    </form>

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.

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

Copy to clipboard
  • <div class="uk-margin">
      <input
        class="uk-form-width-medium uk-input uk-form-danger"
        type="text"
        placeholder="form-danger"
        aria-label="form-danger"
        value="form-danger"
      />
    </div>
    
    <div class="uk-margin">
      <input
        class="uk-form-width-medium uk-input"
        type="text"
        placeholder="disabled"
        aria-label="disabled"
        value="disabled"
        disabled
      />
    </div>

Width modifiers

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

Copy to clipboard
  • <form>
      <input
        class="uk-input uk-width-1-2"
        type="text"
        placeholder="uk-width-1-2"
        aria-label="uk-width-1-2"
      />
    </form>

Blank modifier

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

Copy to clipboard
  • <form>
      <input
        class="uk-form-width-medium uk-input uk-form-blank"
        type="text"
        placeholder="Form blank"
      />
    </form>

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>
Copy to clipboard
  • Radio

  • <form class="uk-form-stacked">
      <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">Text</label>
        <div class="uk-form-controls">
          <input
            class="uk-input"
            id="form-stacked-text"
            type="text"
            placeholder="Some text..."
          />
        </div>
      </div>
    
      <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-select">Select</label>
        <div class="uk-form-controls">
          <select class="uk-select" id="form-stacked-select">
            <option>Option 01</option>
            <option>Option 02</option>
          </select>
        </div>
      </div>
    
      <div class="uk-margin">
        <div class="uk-form-label">Radio</div>
        <div class="uk-form-controls">
          <label
            ><input class="uk-radio" type="radio" name="radio1" /> Option 01</label
          ><br />
          <label
            ><input class="uk-radio" type="radio" name="radio1" /> Option 02</label
          >
        </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>
Copy to clipboard
  • Radio

  • <form class="uk-form-horizontal uk-margin-large">
      <div class="uk-margin">
        <label class="uk-form-label" for="form-horizontal-text">Text</label>
        <div class="uk-form-controls">
          <input
            class="uk-input"
            id="form-horizontal-text"
            type="text"
            placeholder="Some text..."
          />
        </div>
      </div>
    
      <div class="uk-margin">
        <label class="uk-form-label" for="form-horizontal-select">Select</label>
        <div class="uk-form-controls">
          <select class="uk-select" id="form-horizontal-select">
            <option>Option 01</option>
            <option>Option 02</option>
          </select>
        </div>
      </div>
    
      <div class="uk-margin">
        <div class="uk-form-label">Radio</div>
        <div class="uk-form-controls uk-form-controls-text">
          <label
            ><input class="uk-radio" type="radio" name="radio1" /> Option 01</label
          ><br />
          <label
            ><input class="uk-radio" type="radio" name="radio1" /> Option 02</label
          >
        </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>
Copy to clipboard
  • <form>
      <div class="uk-margin">
        <div class="uk-inline">
          <span class="uk-form-icon" uk-icon="icon: user"></span>
          <input class="uk-input" type="text" aria-label="Not clickable icon" />
        </div>
      </div>
    
      <div class="uk-margin">
        <div class="uk-inline">
          <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
          <input class="uk-input" type="text" aria-label="Not clickable icon" />
        </div>
      </div>
    </form>

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>
Copy to clipboard
  • <form>
      <div class="uk-margin">
        <div class="uk-inline">
          <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
          <input class="uk-input" type="text" aria-label="Clickable icon" />
        </div>
      </div>
    
      <div class="uk-margin">
        <div class="uk-inline">
          <a
            class="uk-form-icon uk-form-icon-flip"
            href="#"
            uk-icon="icon: link"
          ></a>
          <input class="uk-input" type="text" aria-label="Clickable icon" />
        </div>
      </div>
    </form>

Form and grid

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

Copy to clipboard
  • <form class="uk-grid-small" uk-grid>
      <div class="uk-width-1-1">
        <input class="uk-input" type="text" placeholder="100" aria-label="100" />
      </div>
      <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50" aria-label="50" />
      </div>
      <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25" aria-label="25" />
      </div>
      <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25" aria-label="25" />
      </div>
      <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50" aria-label="50" />
      </div>
      <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50" aria-label="50" />
      </div>
    </form>

Custom controls

To replace a file input 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>
Copy to clipboard
  • Here is a text
    upload
  • <form>
      <div class="uk-margin">
        <div uk-form-custom>
          <input type="file" aria-label="Custom controls" />
          <button class="uk-button uk-button-default" type="button" tabindex="-1">
            Select
          </button>
        </div>
      </div>
    
      <div class="uk-margin">
        <span class="uk-text-middle">Here is a text</span>
        <div uk-form-custom>
          <input type="file" aria-label="Custom controls" />
          <span class="uk-link">upload</span>
        </div>
      </div>
    
      <div class="uk-margin" uk-margin>
        <div uk-form-custom="target: true">
          <input type="file" aria-label="Custom controls" />
          <input
            class="uk-form-width-medium uk-input"
            type="text"
            placeholder="Select file"
            aria-label="Custom controls"
            disabled
          />
        </div>
        <button class="uk-button uk-button-default">Submit</button>
      </div>
    </form>

Note The hover and focus state for uk-form-custom are not styled by default, but you could use the adjacent sibling selector to do so.

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>
Copy to clipboard
  • <form>
      <div class="uk-margin">
        <div uk-form-custom="target: true">
          <select aria-label="Custom controls">
            <option value="1">Option 01</option>
            <option value="2">Option 02</option>
            <option value="3">Option 03</option>
            <option value="4">Option 04</option>
          </select>
          <span></span>
        </div>
      </div>
    
      <div class="uk-margin">
        <div uk-form-custom="target: > * > span:last-child">
          <select aria-label="Custom controls">
            <option value="1">Option 01</option>
            <option value="2">Option 02</option>
            <option value="3">Option 03</option>
            <option value="4">Option 04</option>
          </select>
          <span class="uk-link">
            <span uk-icon="icon: pencil"></span>
            <span></span>
          </span>
        </div>
      </div>
    
      <div class="uk-margin">
        <div uk-form-custom="target: > * > span:first-child">
          <select aria-label="Custom controls">
            <option value="">Please select...</option>
            <option value="1">Option 01</option>
            <option value="2">Option 02</option>
            <option value="3">Option 03</option>
            <option value="4">Option 04</option>
          </select>
          <button class="uk-button uk-button-default" type="button" tabindex="-1">
            <span></span>
            <span uk-icon="icon: chevron-down"></span>
          </button>
        </div>
      </div>
    </form>

Help block

Form text can be created using .uk-form-help and should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.

Copy to clipboard
  • This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days.
  • <div class="uk-margin">
      <label for="name" class="uk-form-label">Name</label>
      <input
        type="text"
        id="name"
        class="uk-input"
        aria-describedby="name-help-block"
        placeholder="Name"
      />
      <div class="uk-form-help" id="name-help-block">
        This is your public display name. It can be your real name or a pseudonym.
        You can only change this once every 30 days.
      </div>
    </div>

Toggle Switch

Use the following toggle switch component to ask for a yes or no type of input from your users without the use of JavaScript.

Copy to clipboard
  • <div class="flex items-center space-x-2">
      <input
        class="uk-toggle-switch uk-toggle-switch-primary"
        id="toggle-switch"
        type="checkbox"
      />
      <label class="uk-form-label" for="toggle-switch">Toggle me</label>
    </div>
    
    <div class="mt-3 flex items-center space-x-2">
      <input
        class="uk-toggle-switch uk-toggle-switch-primary"
        checked
        id="toggle-checked"
        type="checkbox"
      />
      <label class="uk-form-label" for="toggle-checked">Checked toggle</label>
    </div>
    
    <div class="mt-3 flex items-center space-x-2">
      <input
        class="uk-toggle-switch uk-toggle-switch-primary"
        disabled
        id="toggle-disabled"
        type="checkbox"
      />
      <label class="uk-form-label" for="toggle-disabled">Disabled toggle</label>
    </div>
    
    <div class="mt-3 flex items-center space-x-2">
      <input
        class="uk-toggle-switch uk-toggle-switch-primary"
        checked
        disabled
        id="toggle-disabled-checked"
        type="checkbox"
      />
      <label class="uk-form-label" for="toggle-disabled-checked"
        >Disabled checked toggle</label
      >
    </div>

Style modifiers

There are several style modifiers available. Just add one of the following classes to apply a different look.

ClassDescription
.uk-toggle-switch-primaryAdds a primary style.
.uk-toggle-switch-dangerAdds a destructive style.
Copy to clipboard
  • <div class="flex flex-wrap gap-3">
      <input
        class="uk-toggle-switch uk-toggle-switch-primary"
        checked
        type="checkbox"
      />
      <input
        class="uk-toggle-switch uk-toggle-switch-danger"
        checked
        type="checkbox"
      />
    </div>

Tag input

Tag inputs render tags inside an input, followed by an actual text input. Please note that you have to implement your own JavaScript for removing or adding new tags.

ClassDescription
.uk-tag-inputAdd this class to hold tags and the actual text input.
.uk-tagAdd this class to a span to display the tag.
Copy to clipboard
  • Apple Banana Mango
  • <div class="uk-tag-input">
      <span class="uk-tag">
        Apple
        <span class="uk-close" uk-close></span>
      </span>
      <span class="uk-tag">
        Banana
        <span class="uk-close" uk-close></span>
      </span>
      <span class="uk-tag">
        Mango
        <span class="uk-close" uk-close></span>
      </span>
    
      <input placeholder="Fruits" />
    </div>

Pin input

Allows users to input a sequence of one-character alphanumeric inputs. Please note that you have to implement your own JavaScript to activate the next or previous input when the user types or removes characters.

ClassDescription
.uk-pin-inputAdd this class to hold all the inputs.
.uk-pin-separatedAdd this modifier separate all the inputs.
.uk-disabledAdd this class to disable all the inputs.
Copy to clipboard
  • <div>
      <div class="uk-pin-input">
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
      </div>
    </div>
    
    <div class="mt-5">
      <div class="uk-disabled uk-pin-input">
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
      </div>
    </div>

Separated

Copy to clipboard
  • <div>
      <div class="uk-pin-input uk-pin-separated">
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
      </div>
    </div>
    
    <div class="mt-5">
      <div class="uk-disabled uk-pin-input uk-pin-separated">
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
        <input type="text" maxlength="1" />
      </div>
    </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);

Accessibility

Set the appropriate WAI-ARIA roles, states and properties to the Form component.

  • If no <label> element is associated with the form control, set the aria-label property to the form control to describe its meaning.
<input class="uk-input" type="text" aria-label="…" />

Theme development

On your tailwind.config.js file, add the Form Range and Form components within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        'form-range': {
            hooks: {}
        },
        form: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-form.uk-input, .uk-select, .uk-textarea
hook-single-line.uk-input, .uk-select:not([multiple]):not([size])
hook-multi-line.uk-select[multiple], .uk-select[size], .uk-textarea
hook-focus.uk-input:focus, .uk-select:focus, .uk-textarea:focus
hook-disabled.uk-input:disabled, .uk-select:disabled, .uk-textarea:disabled
hook-placeholder.uk-input::placeholder
hook-placeholder.uk-textarea::placeholder
hook-danger.uk-form-danger, .uk-form-danger:focus
hook-danger-focus.uk-form-danger:focus
hook-success.uk-form-success, .uk-form-success:focus
hook-success-focus.uk-form-success:focus
hook-blank.uk-form-blank
hook-blank-focus.uk-form-blank:focus
hook-radio.uk-radio, .uk-checkbox
hook-radio-focus.uk-radio:focus, .uk-checkbox:focus
hook-radio-checked.uk-radio:checked, .uk-checkbox:checked, .uk-checkbox:indeterminate
hook-radio-checked-focus.uk-radio:checked:focus, .uk-checkbox:checked:focus, .uk-checkbox:indeterminate:focus
hook-radio-disabled.uk-radio:disabled, .uk-checkbox:disabled
hook-legend.uk-legend
hook-label.uk-form-label
hook-stacked-label.uk-form-stacked .uk-form-label
hook-horizontal-label.uk-form-horizontal .uk-form-label
hook-icon.uk-form-icon
hook-icon-hover.uk-form-icon:hover
hook-toggle-switch.uk-toggle-switch
hook-toggle-switch-before.uk-toggle-switch::before
hook-toggle-switch-checked-before.uk-toggle-switch:checked::before
hook-toggle-switch-disabled.uk-toggle-switch:disabled
hook-toggle-switch-primary.uk-toggle-switch-primary:checked
hook-toggle-switch-secondary.uk-toggle-switch-secondary:checked
hook-toggle-switch-danger.uk-toggle-switch-danger:checked
hook-misc*