Input Component Properties

Value
Sets or returns the current contents of this input component.

The Value property

Is Valid
Returns whether this component’s current contents are valid. Validity is determined by the component type, and by properties like Minimum, Maximum, and Input Type.

Validity is checked whenever data is committed. Therefore, if Live Update is enabled, validity is checked constantly. If Live Update is disabled, validity is checked when the focus leaves the component.

The Is Valid property

Live Update
Specifies when the user’s changes to this component are committed. This property affects changes made in Preview Mode, the Viewer, and the deployed application. It does not affect changes that you make within the Property Inspector.

TRUE
Changes are committed constantly, as the user makes them.

FALSE
Changes are committed only when focus leaves the component.

The Live Update property

Left Padding
Defines a number of pixels of space between the left container boundary and the leftmost edge of the content. Negative numbers are not allowed.

Paddings are part of an object's width and height. See Borders, Padding, and Content Size.

The Left Padding property

Right Padding
Defines a number of pixels of space between the right container boundary and the rightmost edge of the content. Negative numbers are not allowed.

Paddings are part of an object's width and height. See Borders, Padding, and Content Size.

The Right Padding property

Top Padding
Defines a number of pixels of space between the top container boundary and the topmost edge of the content. Negative numbers are not allowed.

Paddings are part of an object's width and height. See Borders, Padding, and Content Size.

The Top Padding property

Bottom Padding
Defines a number of pixels of space between the bottom container boundary and the bottommost edge of the content. Negative numbers are not allowed.

Paddings are part of an object's width and height. See Borders, Padding, and Content Size.

The Bottom Padding property

Link Paddings
Links all four padding editors so that their values are equal.

The Link Paddings property

Text Direction
Specifies the direction for text and input in this component, to support the use of right-to-left languages.

Left to right
The text or user input direction is left to right.

Right to left
The text or user input direction is right to left.

Auto
The direction of user input is automatically detected as the user enters text.

The Text Direction property

Font
Specifies the font for this element.

To add a new font to your project and use it for this property, see How do I add a new font to my project?

The Font property

Font Color
Defines the font color for this component.

The Font Color property

Font Size
Defines the font size for this component. If the font size is set to Auto, the text scales to occupy the size of the component.

The Font Size property

Italic
Specifies whether text in this element is italicized.

The Italic property

Bold
Specifies whether text in this element is bold.

The Bold property

Underline
Specifies whether text in this element is underlined.

The Underline property

Horizontal Alignment
Specifies whether the content in this component is left-justified, centered, or right-justified.

The Horizontal Alignment property

Placeholder
Defines the placeholder text that appears in this input component when there is no Value.

The Placeholder property

Input Type
For a text input component, specifies the valid input type, or the expected input type.

Text
A single line of text. Line breaks are automatically removed.

Email
A single, properly formatted e-mail address, or the empty string.

URL
A single, valid, absolute URL, or the empty string.

Tel
A single line of text. Line breaks are automatically removed. On mobile devices, the on-screen keyboard is optimized for number entry.

The Input Type property

Input Type
Specifies the valid input type, or the expected input type.

Date
A year, month, and day.

Week
A year and a week number. A week that spans two years is both week 53 of the earlier year and week 1 of the later year.

Month
A month and year.

The Input Type property

Open
Opens the browser color picker. The color picker is also automatically opened when the user clicks the component.

The Open property

Datalist
Specifies the predefined colors in this color input component. Predefined colors are not supported in all browsers. Regardless of whether the predefined list is supported, the user can still enter a custom value.

Click on color in the Property Inspector to edit it.

Colors are displayed in order in this color input component, with the top color appearing first.

The Datalist property

Min
Defines the predefined colors in this color input component. Predefined colors are not supported in all browsers. Regardless of whether the predefined list is supported, the user can still enter a custom value.

Click on color in the Property Inspector to edit it.

Colors are displayed in order in this color input component, with the top color appearing first.

If this is a range input component, and the minimum is null, the bottom of the range is zero.

The Min property

Max
Defines a maximum valid number for this input component.

If this is a range input component, and the maximum is null, the top of the range is 100.

The Max property

Step
Defines the interval between valid numbers for this input component. Valid numbers are the minimum and multiples of the Step value larger than the minimum. If no minimum is defined, valid numbers are zero and multiples of the Step value larger or smaller than zero. A Step value of zero means that any interval is allowed.

The Step property

Max
Defines a maximum valid number for this input component.

If this is a range input component, and the maximum is null, the top of the range is 100.

The Max property

Step
Defines the interval between valid numbers for this input component. Valid numbers are the minimum and multiples of the Step value larger than the minimum. If no minimum is defined, valid numbers are zero and multiples of the Step value larger or smaller than zero. A Step value of zero means that any interval is allowed.

The Step property

Ticks
Defines values where ticks appear on the range selector, as a list of comma-separated values.

The Ticks property

Filename
Sets or returns the name of the file to open.

The Filename property

File Content
Displays the content of the selected file as a string or binary.

The File Content property

Files
Returns a read-only table describing the files selected by the user.

The Files property

Mode
Sets whether the file content is displayed as a string or as binary.

The Mode property

Selection Type
Determines whether the user can select multiple files.

Single File
The user can select only one file.

Multiple Files
The user can select one or more files.

The Selection Type property

Accept
Specifies the file formats that are accepted by this file chooser.

Enter one or more of the following values separated by commas:

• .png, .jpg, .gif, etc.: Files of the format specified.
• audio/*: All sound files.
• video/*: All video files.
• image/*: All image files.
• media_type/*: Replace media_type with any valid media type, to accept all formats within that type. Look at IANA Media Types for a complete list of standard media types.

The Accept property

Open
A trigger that opens the browser file chooser. For information about using triggers, see Binding from an Event Property to a Trigger Property.

The Open property

Value
Sets or returns the currently selected list option.

The Value property

Selected Index
Sets or returns the index of the currently selected list option. A value of 0 indicates the top option in the list.

The Selected Index property

Options
Defines the list of options for this list element, as comma-separated values.

The Options property

Selected Element Font
Defines the font for the selected option.

To add a new font to your project and use it for this property, see How do I add a new font to my project?

The Selected Element Font property

Selected Element Font Color
Defines the font color for the selected option.

The Selected Element Font Color property

Selected Element Font Size
Defines the font size for the selected option.

The Selected Element Font Size property

Selected Element Font Italic
Defines whether the selected option is italic.

The Selected Element Font Italic property

Selected Element Font Bold
Defines whether the selected option is bold.

The Selected Element Font Bold property

Selected Element Font Underline
Defines whether the selected option is underlined.

The Selected Element Font Underline property

Options Font
Defines the font for the options list. Not supported in all browsers. To add a font to this project and use it for this property, see How do I add a new font to my project?

The Options Font property

Options Font Color
Defines the font color for the options list. Not supported in all browsers.

The Options Font Color property

Options Font Size
Defines the font size for the options list. Not supported in all browsers.

The Options Font Size property

Options Font Italic
Defines whether the options list is italic. Not supported in all browsers.

The Options Font Italic property

Options Font Bold
Defines whether the options list is bold. Not supported in all browsers.

The Options Font Bold property

Options Font Underline
Defines whether the options list is underlined. Not supported in all browsers.

The Options Font Underline property

Options Background
Defines the background color for the options list. Not supported in all browsers.

The Options Background property

Show Arrow
Determines whether an arrow graphic appears in the component, indicating a drop-down list.

The Show Arrow property

Arrow Image
Specifies a custom arrow graphic that appears if Show Arrow is enabled. If you don't specify an image, a default graphic is used.

The Arrow Image property