Forms

Forms ask users to enter or select information. For example, when users edit a contact's details or create a meeting request, they're using a form.

Best practices

Minimize the amount of text that users need to type. Only ask for relevant information. Include smart default values and let users choose from pickers where possible. Try to store and display information that users enter so that they don't have to enter the same information again and again.

If the form has a lot of fields, put the focus on the first field. This helps users complete the form quickly. If the first field isn't a text field, don't put the focus on any component. Otherwise, users might miss the first component.

This screen shows an example of a form.

Best practices for groups and labels

Group and order fields logically (for example, group related items together or include the most common items first).

Use labels, space, dividers, and different font sizes to create hierarchy as needed but avoid creating too much visual noise. Use bordered sections sparingly.

Limit the use of labels. Include hint text in fields to minimize the need for descriptive labels. This approach helps keep forms compact and content-focused. In some cases, you might need a label if the field contains a default value or if the description of the field is too long to include as hint text.

Put labels above the associated fields. This provides a stronger visual hierarchy for small screens and allows extra space for translated text, if required. If your app appears in landscape, you could consider putting labels beside the associated fields.

Best practices for input

Allow users to press Enter to move to the next text field. Make sure that the form scrolls so that users can see the next field.

Be flexible with formats. For example, for phone numbers, accept (519) 555-0199, 5195550199, and 519-555-0199.

Use a specific type of virtual keyboard if the input is limited to a specific type of entry. For example, use a numeric keyboard for entering numbers.

Create appropriately-sized fields. Let the size of a field show how much information users should enter.

Use progressive disclosure. If the form contains infrequently used fields or if a set of fields are a result of a previous field, use progressive disclosure to reveal fields at the appropriate time.

Best practices for validation and submission

Validate information as users progress through the form. Don't make users wait for information to validate against a server.

If you create custom UI components, use a distinct visual cue (for example, a red box) to inform users of errors. Try to add descriptive error text close to the location of the error. If you can't validate the information until users submit the form and fields are in error, scroll to the first field in the form with an error. BlackBerry UI components contain built-in error states.

Disable a "Submit" action until users enter all of the required data. If users try to select a disabled "Submit" action, display an inline message or a toast to identify what's missing.

When appropriate, allow users to submit a form by pressing Enter (for example, when entering a username and password). This makes text entry faster.