Form

Easily create nice looking forms with different styles and layouts.

Table of contents

• Usage
• Destructive modifier
• Size modifiers
• Width modifiers
• Blank modifier
• Layout
  • Horizontal form
• Form and icons
  • Clickable icons
• Custom controls
  • File
  • Select
• Help block
• Toggle Switch
• Accessibility

Usage

Add one of the following classes to form controls inside a <form> element to define them.

Class	Description
.uk-input	Add this class to <input> elements.
.uk-select	Add this class to <select> elements.
.uk-textarea	Add this class to <textarea> elements.
.uk-radio	Add this class to <input type="radio"> elements to create radio buttons.
.uk-checkbox	Add this class to <input type="checkbox"> elements to create checkboxes.
.uk-range	Add this class to <input type="range"> elements to create range forms.
.uk-toggle-switch	Add this class to <input type="checkbox"> elements to create toggle switches.

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.

Destructive modifier

Add the .uk-form-destructive class to an <input>, <select> or <textarea> element to notify the user that the value is not validated.

Size modifiers

There are several size modifiers available. Just add one of the following classes to make the form smaller or larger.

Class	Description
.uk-form-xs	Applies extra small size.
.uk-form-sm	Applies small size.
.uk-form-md	Applies medium size.
.uk-form-lg	Applies large size.

Width modifiers

You can use Tailwind CSS utility classes alongside form classes and the it will follow its width.

Blank modifier

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

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.

Class	Description
.uk-form-stacked	Add this class to display labels on top of controls.
.uk-form-horizontal	Add this class to display labels and controls side by side.
.uk-form-label	Add this class to define form labels.
.uk-form-label-required	Add this class to automatically add an asterisk to form labels.
.uk-form-controls	Add this class to define form controls.

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

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.

Custom controls

To replace a file input or select forms with your own HTML content, like a button or text, add the data-uk-form-custom attribute to a container element.

File

Use a button or text as a file input.

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.

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.

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. You can also add the the .uk-toggle-switch-destructive modifier to apply a destructive style.

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.