The Textbox component is a text input field that accepts either a single line or multiple lines of input. This component has the following elements:
- Label: An optional label for the component.
- Container: A long container including input text, hint text and other elements.
- Cursor: Device platform provides a blinking cursor.
- Hint Text: Placeholder text is optional element for the container.
- Input Text: The text that the user enters.
- Mask: The masked bullets are used on secret input type.
- Search: The search icon is used on the search input type.
- Clear: The clear icon is an optional element that can be coded by the application developer.
Appearance characteristics for this component.
- Label: An optional label may be displayed.
- State: Supports enabled, pressed, disabled and read-only.
- Style: Text fields display differently on the iOS and Android platforms.
- Type: Supports Normal, Multi Line, Secret, Email, Number, Phone, and URL.
- Hint Text: Placeholder text can be displayed by default.
- Icons: Search, clear and other icons can be placed into the field with custom CSS.
- Read-Only: The selected item is black and white.
- Rendered: This component can be shown or hidden.
Common behaviors for this component.
- Keyboard: When a user taps into Textbox, the keyboard slides up.
- Cursor: When a user taps into the textbox a blinking cursor displays. This cursor indicates where adding or editing text can occur.
- Hint Text: The placeholder text will disappear when the user begins to type.
- Scrolling: Rows of text in the Multiple line text box will scroll up as more text is entered.
- Width: If the width of the Textbox is shorter than the length of the value
- Single Line: The value is not shown.
- Text Area: Text wraps to the next line or horizontally scrolls. If a text area is not large enough to display all of its contents, a vertical scroll bar appears.
Usage guidelines for this component.
- There is no recommended width for Textbox, but it should fit within the application page or area.
- If text cannot fit in a text field, ellipses should appear.
- In pages where a text field or text area is the only component on the page, the input focus should be given to the field/area and the keyboard should be displayed by default when the page loads. The user should not be required to tap first to enter/edit text.
- A recommended height for a text area is 3 or 4 lines, but product teams can increase or decrease the size of a text box according to expected content.
- The Textbox should be disabled when users are not able to enter data, but it is still necessary to display the box because it may be enabled in different contexts.
- The Textbox should be shown as read-only when data is displayed in a read-only page, such as a printable page. Read-only data may also be displayed when the user has permission to view the text, but not to edit it.
- Caution should be used when attempting to embed a Text Area in a typical Form because it may make the Form too long. Sometimes on the phone it is displayed on another page.
- When using a multiple line Textbox to display read-only content with hard line breaks, such as a contract, set the box width to avoid additional line breaks that make the content harder to scan. When the box is read only, the box does not render; only the value within the box renders as plain text.
AMX sample code for this component.
<amx:inputText label="Normal" id="it1" hintText="Hint text"/>
<amx:inputText label="Disabled" id="it2" disabled="true" value="Text here"/>
<amx:inputText label="Read-Only" id="it3" readOnly="true" value="Text here"/>
<amx:inputText label="Secret" id="it4" value="Text here" secret="true"/>
<amx:inputText label="Email" id="it11" inputType="email" value="firstname.lastname@example.org"/>
<amx:inputText label="Number" id="it12" inputType="number" value="500"/>
<amx:inputText label="Phone" id="it13" inputType="tel" value="303-555-1212"/>
<amx:inputText label="URL" id="it14" inputType="url" value="www.oracle.com"/>
<amx:inputText label="Multiple Line" id="it5" rows="4"/>
- Used On: Phone, Tablet
- Also Called: Check, True/False
- Related Components: Text
- Resources: None