For this type of project, you can use the Copywriting template (view code in the sandbox). It has pre-configured validation and task layout.

Components used in the example

What else can be configured

If this template doesn't meet your needs, see other examples in this section.

Example without an image

A simplified example without an image or columns. It can be used for tasks that don't require visual display, such as translations.

View example

Multiple columns

To compare two texts, place them in adjacent columns using the layout.columns component. It allows you to set the column width and vertical alignment.

The component adds frames around the texts to visually separate them from each other and make them easier to read.

The third column in the example contains two input fields for users to write their text.

View example

Show hidden field

This example is suitable for text search, like for finding errors in a text. If the user finds mistakes, selecting the relevant option opens the text input field.

Decide how you want to display the options: with radio buttons, regular buttons, or a checkbox.

Use the component.

View example

The user adds input fields

This is a complex example that consists of four main parts:

What's unique about this example is that the user can add and remove text input fields.

In addition, the example checks that each line has at least three characters, including Russian or English letters and spaces. The condition is implemented using condition.schema.

View example