Input component

Level: beginner

Input is a component that lets you set up an input on an app page. The Input component uses its own <input> and <label> elements to ensure the the input is available by default. The aria-label attribute is generated automatically and refers to the <input> parent element.

Properties

id string

The unique ID. Service field.

control FormControl

The control.

label string

The input title.

inputType string

The input type. By default, text.

Available values

text	Sets the input type to text.
password	Sets the input type to text displayed using * characters. Includes a button to view the actual text.

placeholder string

The hint the input displays before you start filling it out.

appearance enum

The input appearance. By default, legacy.

Available values

legacy	Display only the bottom input border.
outline	Display all input borders.

value string

The input value.

disabled boolean

The flag that locks the input from editing.

readonly boolean

The flag that sets the input to read-only. By default, false.

autocomplete string

Permit the browser to populate the input automatically. By default, off.

rowModeSizePx number

The width of the input. When the width reaches the value and the auto mode is set, Creatio switches Input and Checkbox components from vertical to horizontal view. By default, 320.

labelPosition string

Specifies where to display the input title. By default, auto.

Available values

auto	Move the input title automatically when the available screen space for the input changes. By default, to the left. When shrunk, above.
left	Display the title to the left of the input.
right	Display the title to the right of the input.
hidden	Hide the input title.
above	Display the title above the input.