---
title: "Form UI Element"
description: "A UI component for building form interfaces in Jodit by composing inputs, blocks, and buttons through the UIForm, UIInput, and UIBlock elements."
metadata:
  - name: keywords
    content: "jodit, form, ui element, uiform, uiinput, form interface"
---
# Form UI Element

Component for creating form interfaces.

```ts
import { UIForm, UIInput, UIBlock } from 'jodit/core/ui';

const form = new UIForm(jodit, [
  new UIInput(editor, {
    required: true,
    label: 'URL',
    name: 'url',
    type: 'text',
    placeholder: 'https://'
  }),
  new UIInput(editor, {
    name: 'text',
    label: 'Alternative text'
  }),
  new UIBlock(editor, [button])
]);
```


## Classes

- [UIBlock](../classes/ui_form.UIBlock.html)
- [UIForm](../classes/ui_form.UIForm.html)
- [UITextArea](../classes/ui_form.UITextArea.html)
- [UICheckbox](../classes/ui_form.UICheckbox.html)
- [UIFileInput](../classes/ui_form.UIFileInput.html)
- [UIInput](../classes/ui_form.UIInput.html)
- [UISelect](../classes/ui_form.UISelect.html)

### required

`const` **required**: [`IUIInputValidator`](../interfaces/types.IUIInputValidator.html)\<[`IUIInput`](../interfaces/types.IUIInput.html)\>

Defined in: [src/core/ui/form/validators/input.ts:18](https://github.com/xdan/jodit/blob/main/src/core/ui/form/validators/input.ts#L18)

Input is required

***

### url

`const` **url**: [`IUIInputValidator`](../interfaces/types.IUIInputValidator.html)\<[`IUIInput`](../interfaces/types.IUIInput.html)\>

Defined in: [src/core/ui/form/validators/input.ts:30](https://github.com/xdan/jodit/blob/main/src/core/ui/form/validators/input.ts#L30)

Input value should be valid URL

***

### required

`const` **required**: [`IUIInputValidator`](../interfaces/types.IUIInputValidator.html)\<[`IUIInput`](../interfaces/types.IUIInput.html)\>

Defined in: [src/core/ui/form/validators/select.ts:17](https://github.com/xdan/jodit/blob/main/src/core/ui/form/validators/select.ts#L17)

Select is required