Skip to content

Form Elements

Form Elements are YOOtheme Pro builder elements used to structure a Form Area and define data specifics. Those are grouped under Form Essentials builder element library.

Form Fields

Button Element

The Form Button Element displays a grid of <button> HTML elements with support for submit and reset types. Each type is wrapped into a child element with its specific features.

Button Element

SettingDescription
SizeThe field size defined by uk-form-{size} modifier.
Full WidthShould the field occupy the full width of its parent.
Column GapThe size of the gap between grid columns.
Row GapThe size of the gap between grid rows.

Button Reset Element

Child of Button Element, the Button Reset Element displays a <button type="reset"> HTML element, use it to display a button that will reset the form.

Button Reset Element

SettingDescriptionDynamic
ContentThe text for the button.
StyleThe button style as Default, Primary, Secondary, Danger, Text, Link, Link Muted, or Link Text.
IconThe name of the Icon that will be displayed inside the button.
Icon AlignmentThe side of the button where the icon will be positioned, Left or Right.

Button Submit Element

Child of Button Element, the Button Submit Element displays a <button type="submit"> HTML element, use it to display a button that will submit the form.

Button Submit Element

SettingDescriptionDynamic
ContentThe text for the button.
StyleThe button style as Default, Primary, Secondary, Danger, Text, Link, Link Muted, or Link Text.
IconThe name of the Icon that will be displayed inside the button.
Icon AlignmentThe side of the button where the icon will be positioned, Left or Right.

Input Element

The Input Element displays a grid of <input> HTML elements with support for text, date, email, number, password, tel, url, month, time, and week types. Each type is wrapped into a child element with its specific features and validation covered in the next sections.

Set multiple children of any type and control the display, grid, and settings of all of them within the parent with an option to override.

Input Element

SettingDescription
Show LabelShould the label be displayed for all children.
Show IconShould the icon be displayed for all children.

Input Common Settings

SettingDescription
SizeThe field size defined by uk-form-{size} modifier.
WidthThe field width defined by uk-form-width-{width} modifier.
Full WidthShould the field occupy the full width of its parent.
IconThe name of the Icon that will be displayed inside the field.
Icon AlignmentThe side of the field where the icon will be aligned, Left or Right.

Input Columns Settings

SettingDescription
Number of ColumnsThe amount of grid columns.
Column GapThe size of the gap between grid columns.
Row GapThe size of the gap between grid rows.

Input Text Element

Child of Input Element, the Input Text Element displays a <input type="text"> HTML element, use it to create one-line text fields.

Input Text Element

SettingDescriptionDynamic
PlaceholderThe text to be shown while there is no user input.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.
ValidationDescriptionDynamicBrowser SideServer Side
Min LengthThe minimum content length that the input value must constrain to, greater than or equal to.
Max LengthThe maximum content length that the input value must constrain to, lower than or equal to.
PatternThe regular expression pattern that the input value must match to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Input Number Element

Child of Input Element, the Input Number Element displays a <input type="number"> HTML element, use it to create one-line fields restricted to numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by tapping with a fingertip.

Input Number Element

SettingDescriptionDynamic
PlaceholderThe text to be shown while there is no user input.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

While the browser validation invalidates any entry that isn't a number, it inherits common validation with the following specifics:

ValidationDescriptionDynamicBrowser SideServer Side
MinThe minimum amount that the input value must constrain to, greater than or equal to.
MaxThe maximum amount that the input value must constrain to, lower than or equal to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Input Date Element

Child of Input Element, the Input Date Element displays a <input type="date"> HTML element, use it to create one-line date edit fields.

Input Date Element

Styling Limitations

Date input relies on the browser's native implementation, the picker and icon style is inconsistent and its customization is not possible.

SettingDescriptionDynamic
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

WARNING

Browser does not apply any validation other than the user agent's interface, when supported, restricting the input to a date value. As we cannot entirely rely on the browser, a date format validation is performed on the server side.

ValidationDescriptionDynamicBrowser SideServer Side
MinThe minimum date that the input value must constrain to, greater than or equal to.
MaxThe maximum date that the input value must constrain to, lower than or equal to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Input Email Element

Child of Input Element, the Input Email Element displays a <input type="email"> HTML element, use it to create one-line e-mail address edit fields.

Input Email Element

SettingDescriptionDynamic
PlaceholderThe text to be shown while there is no user input.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

WARNING

Browser-side validation ensures that only text that matches the standard format for Internet e-mail addresses is entered. If you need the URL to be restricted further you can set a regular expression pattern.

ValidationDescriptionDynamicBrowser SideServer Side
Min LengthThe minimum content length that the input value must constrain to, greater than or equal to.
Max LengthThe maximum content length that the input value must constrain to, lower than or equal to.
PatternThe regular expression pattern that the input value must match to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Input Time Element

Child of Input Element, the Input Time Element displays a <input type="time"> HTML element, use it to create one-line time edit fields.

Input Time Element

Styling Limitations

Time input relies on the browser's native implementation, the picker and icon style is inconsistent and its customization is not possible.

SettingDescriptionDynamic
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

WARNING

Browser does not apply any validation other than the user agent's interface, when supported, restricting the input to a time value. As we cannot entirely rely on the browser, a time format validation is performed on the server side.

ValidationDescriptionDynamicBrowser SideServer Side
MinThe minimum time that the input value must constrain to, greater than or equal to.
MaxThe maximum time that the input value must constrain to, lower than or equal to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Input Url Element

Child of Input Element, the Input Url Element displays a <input type="url"> HTML element, use it to create one-line url edit fields.

Input Url Element

SettingDescriptionDynamic
PlaceholderThe text to be shown while there is no user input.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

Browser-side validation ensures that only text that matches the standard format for URLs is entered. If you need the URL to be restricted further you can set a regular expression pattern.

ValidationDescriptionDynamicBrowser SideServer Side
Min LengthThe minimum content length that the input value must constrain to, greater than or equal to.
Max LengthThe maximum content length that the input value must constrain to, lower than or equal to.
PatternThe regular expression pattern that the input value must match to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Input Password Element

Child of Input Element, the Input Password Element displays a <input type="password"> HTML element, use it to create one-line text field where the user can input it password without it being visible. The text is obscured usually by replacing each character with a symbol such as an asterisk (*) or a dot (). This character will vary depending on the user agent and operating system.

Input Password Element

SettingDescriptionDynamic
PlaceholderThe text to be shown while there is no user input.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.
ValidationDescriptionDynamicBrowser SideServer Side
Min LengthThe minimum content length that the input value must constrain to, greater than or equal to.
Max LengthThe maximum content length that the input value must constrain to, lower than or equal to.
PatternThe regular expression pattern that the input value must match to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Input Month Element

Child of Input Element, the Input Month Element displays a <input type="month"> HTML element, use it to create one-line month edit fields.

Input Month Element

Styling Limitations

Month input relies on the browser's native implementation, the picker and icon style is inconsistent and its customization is not possible.

SettingDescriptionDynamic
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

WARNING

Browser does not apply any validation other than the user agent's interface, when supported, restricting the input to a date value.

ValidationDescriptionDynamicBrowser SideServer Side
MinThe minimum month that the input value must constrain to, greater than or equal to.
MaxThe maximum month that the input value must constrain to, lower than or equal to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Input Tel Element

Child of Input Element, the Input Tel Element displays a <input type="tel"> HTML element, use it to create one-line telephone number edit fields.

Input Tel Element

SettingDescriptionDynamic
PlaceholderThe text to be shown while there is no user input.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.
ValidationDescriptionDynamicBrowser SideServer Side
Min LengthThe minimum content length that the input value must constrain to, greater than or equal to.
Max LengthThe maximum content length that the input value must constrain to, lower than or equal to.
PatternThe regular expression pattern that the input value must match to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Textarea Element

The Textarea Element displays a <textarea> HTML element, use it to allow users entering a sizeable amount of free-form text, for example, a comment on a review or feedback form.

Textarea Element

SettingDescriptionDynamic
PlaceholderThe text to be shown while there is no user input.
SizeThe field size applyied with uk-form-{size} modifier.
WidthThe field width applyied with uk-form-width-{width} modifier.
RowsThe number of visible text lines by setting a value for rows attribute.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.
ValidationDescriptionDynamicBrowser SideServer Side
Min LengthThe minimum content length that the input value must constrain to, greater than or equal to.
Max LengthThe maximum content length that the input value must constrain to, lower than or equal to.
PatternThe regular expression pattern that the input value must match to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Range Element

The Range Element displays a <input type="range"> HTML element, use it to allow users to enter a numeric value in a specified range which precise value, however, is not considered important.

Range Element

SettingDescription
SizeThe field size applied with uk-form-{size} modifier.
WidthThe field width applied with uk-form-width-{width} modifier.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.
ValidationDescriptionDynamicBrowser SideServer Side
MinThe minimum amount that the input value must constrain to, greater than or equal to.
MaxThe maximum amount that the input value must constrain to, lower than or equal to.
StepThe multiple of which the input value must constrain to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Select Element

The Select Element displays a <select> HTML element, use it to allow users to choose, by selection, a single or multiple pre-established options.

Select Element

SettingDescription
SizeThe field size applied with uk-form-{size} modifier.
WidthThe field width applied with uk-form-width-{width} modifier.
HeightThe number of rows in the list that will be visible by default, if Multiple Selection is enabled.
Multiple SelectionShould it be allowed to choose more than one option.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

Options are specified as child items that can be input manually as well as dynamically with the use of a Dynamic Content source. Each option has the following settings:

Field Options

SettingDescriptionRequired
ValueThe option value, must be unique among its siblings.
TextThe option text, defaults to the value if omitted. HTML tags are supported.
StateDefines if the option is Disabled or Enabled. Disabled options are unusable and unclickable.
IdThe option ID attribute, it overrides any ID set in the parent element.
ValidationDescriptionDynamicBrowser SideServer Side
MinThe minimum amount of options that must be chosen, greater than or equal to.
MaxThe maximum amount of options that can be chosen, lower than or equal to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

TIP

For a select with a placeholder add an option with an empty value and custom label above all other options.

Checkbox Element

The Checkbox Element displays a group of <input type="checkbox"> HTML elements wrapped in a <label>, use it to allow users choosing, by toggling boxes, a single or multiple pre-established options.

Checkbox Element

SettingDescription
LayoutThe layout that will be used to display the options, Vertical or Horizontal.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

Options are specified as child items that can be input manually as well as dynamically with the use of a Dynamic Content source. Each option has the following settings:

Field Options

SettingDescriptionRequired
ValueThe option value, must be unique among its siblings.
TextThe option text, defaults to the value if omitted. HTML tags are supported.
StateDefines if the option is Disabled or Enabled. Disabled options are unusable and unclickable.
IdThe option ID attribute, it overrides any ID set in the parent element.
ValidationDescriptionDynamicBrowser SideServer Side
MinThe minimum amount of options that must be chosen, greater than or equal to.
MaxThe maximum amount of options that can be chosen, lower than or equal to.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Radio Element

The Radio Element displays a group of <input type="radio"> HTML elements wrapped in a <label>, use it to allow users choosing a single option from a pre-established group.

Radio Element

SettingDescription
LayoutThe layout that will be used to display the options, Vertical or Horizontal.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

Options are specified as child items that can be input manually as well as dynamically with the use of a Dynamic Content source. Each option has the following settings:

Field Options

SettingDescriptionRequired
ValueThe option value, must be unique among its siblings.
TextThe option text, defaults to the value if omitted. HTML tags are supported.
StateDefines if the option is Disabled or Enabled. Disabled options are unusable and unclickable.
IdThe option ID attribute, it overrides any ID set in the parent element.
ValidationDescriptionDynamicBrowser SideServer Side
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Upload Element

The Upload Element displays a <input type="file"> HTML element wrapped with a UIkit Custom Control, use it to allow users uploading one or more files from their device.

Upload Element

SettingDescriptionDynamic
Upload toThe server path where the file will be uploaded to.
FilenameAn optional filename to rename the uploaded file with.
Allow multipleShould be allowed to upload multiple files simultaneously.
Avoid collisionsShould the uploaded filename be renamed in the case of a name conflict with a pre-existing file. The new name will be the original name appended with _{n}, being n a sequential number.
LabelThe title for the field that represents the field data.
ControlThe name that identifies the field control within the form. It's required and must be unique for the Form Area.
ValueThe efault value for the field. The user can change it.
ReadonlyShould the field be read-only. Any default value will be unedible.
AutofocusShould the field will be autofocused as soon as the page loads. Only one field can be focused on each page.
Sync ID / ControlShould the field ID attribute obtain it value from the Control Name.

Upload Display

SettingDescription
DisplayThe combination of HTML elements to show, Button & Input, Button, Link, or Native.
TextThe text for the button or link, if those are displayed.

Upload Input

SettingDescription
IconThe name of the Icon that will be displayed inside the input field.
Icon AlignmentThe side of the field where the icon will be aligned, Left or Right.

Upload Button

SettingDescription
Full WidthShould the button occupy the full width of its parent.
IconThe name of the Icon that will be displayed inside the input field.
Icon AlignmentThe side of the button where the icon will be aligned, Left or Right.
ValidationDescriptionDynamicBrowser SideServer Side
Mime TypesThe comma-separated list of mime types that the uploaded files must constrain to, e.g. image/png, video/*.
ExtensionsThe comma-separated list of file extensions that the uploaded files must constrain to, e.g. png, jpg, gif.
Min File SizeThe minimum size that the uploaded files must constrain to, greater than or equal to, using any standard size unit B, KB, MB, GB, TB, PB, EB, ZB, or YB.
Max File SizeThe maximum size that the uploaded files must constrain to, lower than or equal to, using the same size units as Min File Size.
RequiredDefines if the field must have a value.
Error MessageA message that will be displayed if the element validation fails. Optionally use {fieldlabel} as placeholder, it will be replaced with the field label.

Hidden Element

The Hidden Element displays a <input type="hidden"> HTML element, use it to include data that cannot be seen or modified by users when a form is submitted.

SettingDescriptionDynamic
ControlThe name that identifies the field control within the form. It's required and must be unique for the form area.
ValueThe value to submit for the control.

Fieldset Element

The Fieldset Element displays a <fieldset> HTML element, use it to group fields for visual and accessibility purposes.

SettingDescription
ContentThe text for the button.
LayoutThe layout for the fields display, Horizontal or Stacked.
Show LabelShould the label of the field be displayed.