Input

Overview

Add an text input function to the view.

Component Properties

Dimensions — The placement on the canvas (X and Y) and the size (width and height) of the component.

To move a component freely, the View Property tab must have the Free Positioning option checked.

Data

Auto Correct — Apply auto correct to the input.

Auto Focus This Input — Select this box to set focus to this component when coming to this view.

Hide the Caret — Hide the caret (marker).

Hide the Context Menu — Hide the context menu.

Placeholder — Add an optional text or value as a placeholder.

Initial Value — Add an optional default text or value.

Editable — Make the component editable.

Keyboard Type — Select a suitable type of keyboard for user input.

Keyboard Return Key Type — Selects the type of key for a return event from the keyboard.

iOS Input Autocomplete Type — Select the type of auto complete for iOS devices.

Android Input Autocomplete Types — Select the type of auto complete for Android devices.

Web Input Autocomplete Type — Select the type of auto complete for PWA (progressive web application) input.

Obscure Input Text — Replace the entered text with asterisks *.

Maximum Length — Set a value for the maximum length of the entered text or value.

Multiline — Allow multi line input.

On User Submit From Keyboard — Select event when the user enters something from the keyboard.

Select All Text On Input Focus — Select all text when the component gets focus.

On Change — Select event when the content changes.

On Key Press — Select event when a key is pressed.

On Press — Select event when the component is pressed, short.

On Long Press — Select event when the component is pressed, long.

On Press In — Select event when the component is pressed in.

On Press Out — Select event when the component is released.

On Focus — Select event when the component gets focus.

On Blur — Select event when the component loses focus.

Hide Component The component can be hidden by applying a rule on a certain event.

Output

Value — Select a value to be sent to output, configured under the View Properties tab.

Accessibility

Accessibility Label — Interface Accessibility label.

Accessibility Hint — Interface Accessibility hint.

Accessibility Role — Select an accessibility role, a function, for the component, to support disabled users.

Styling

Override — Override the currently selected style.

Placeholder Text Color — Select the color of the component’s placeholder text.

Text Align — Set the alignment of the text.

Text Color — Select the color of the component’s text.

Text Font — Select the font of the component’s text.

Text Size — Select the font size of the component’s text.

Text Style — Select normal or italic text.

Text Weight — Select normal or bold text.

Text Decoration — Adds underline or strike through decoration to the text.

Letter Spacing — Sets the space between letters.

Text Transform — Select if the text should be set to uppercase, lowercase or begin with a capital letter.

Border Color — Select the color of the component’s borders.

Border Style — Sets the style, solid, dotted or dashed, of the component’s border.

Border Width — Sets the width of the component’s border.

Active Border Top Color — The color of the top border, when the component is active.

Active Border Top Width — The width of the top border, when the component is active.

Active Border Bottom Color — The color of the bottom border, when the component is active.

Active Border Bottom Width — The width of the bottom border, when the component is active.

Active Border Left Color — The color of the left border, when the component is active.

Active Border Left Width — The width of the left border, when the component is active.

Active Border Right Color — The color of the right border, when the component is active.

Active Border Right Width — The width of the right border, when the component is active.

Background Color — Sets the background color of the component.

Background Image — Select an image as the component’s background.

Background Size — Select if the image should cover the component’s background, be centered, repeated or stretched.

Component Width — The width of the component inside the container (the component’s borders).

Component Height — The height of the component inside the container (the component’s borders)

Flex Direction — Select the main axis where flex items will be placed, for instance horizontal or vertical (along a row or in a column).

Justify Content — Select how flex items will be placed in relation to each other, for instance towards the start of the flex direction, or with space between.

Align Content — Select how flex items will be placed in relation to the components border.

Align Items Select how flex items will be placed in relation to the flex direction.

Border Top Color — The color of the component’s top border.

Border Top Width — The width of the component’s top border.

Border Bottom Color — The color of the component’s bottom border.

Border Bottom Width — The width of the component’s bottom border.

Border Left Color — The color of the component’s left border.

Border Left Width — The width of the component’s left border.

Border Right Color — The color of the component’s right border.

Border Right Width The width of the component’s right border.

Border Top Left Radius — Sets the rounding of the top left corner.

Border Bottom Left Radius — Sets the rounding of the bottom left corner.

Border Top Right Radius — Sets the rounding of the top right corner.

Border Bottom Right Radius — Sets the rounding of the bottom right corner.

Border Radius (All) — Sets the rounding of all corners.

Shadow — Adds a shadow to the component’s borders.

Opacity — Sets the opacity of the component.

Component Padding — Sets the padding, top, bottom, left, right of the component inside the container (the component’s borders).

Component Container Padding — Sets the padding, top, bottom, left, right of the component container (the component’s borders).