---
title: "UI System"
description: "The set of reactive UI components for building complex Jodit interfaces, where each element implements IUElement and extends the UIElement base class."
metadata:
  - name: keywords
    content: "jodit, ui system, uielement, ui components, reactive ui, interface design"
---
# UI System

For interface design, Jodit provides a set of components that allow you to build complex interfaces.
Their advantage is the uniformity of the insert/drop interfaces. Reactivity created by observing the fields of the component.

Each UI element must implement the interface [[IUElement]], and should extend [UIElement](../classes/ui.UIElement.html).

> For each element to work, an instance is required when creating it [IViewBased](../interfaces/types.IViewBased.html)

```ts
import './style.less';

import { UIElement } from 'jodit/core/ui';
import { component } from 'jodit/core/decorators';

@component
export class UISlider extends UIElement {
  className() {
    return 'UISlider';
  }

  render(): string {
    return `<div>
      <div class="&__wrapper">
        <div class="&__item">1</div>
        <div class="&__item">2</div>
        <div class="&__item">3</div>
      </div>
    </div>`;
  }
}
```

Pay attention to the styles. They connect explicitly.

File `style.less`

```less
.jodit-ui-slider {
  &__wrapper {
    display: flex;
    overflow: scroll;
  }

  &__slider-item {
    display: flex;
    width: 200px;
    height: 100px;
    background-color: red;
  }
}
```


## Classes

- [UIElement](../classes/ui.UIElement.html)
- [Icon](../classes/ui.Icon.html)

### focusFormField()

**focusFormField**(`box`): `void`

Defined in: [src/core/ui/helpers/focus-form-field.ts:19](https://github.com/xdan/jodit/blob/main/src/core/ui/helpers/focus-form-field.ts#L19)

Focuses the first text field shown in a form inside `box`, so that typing
fills it in rather than replacing the selected content, as in a dialog. A
form round `box`, as the image properties dialog's round its tabs, doesn't
count, and neither do fields outside a form, as the color picker's

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `box` | [`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement) |

#### Returns

`void`