Form elements

Form elements

Form inputs are the primary method of communication with customers inside of our app. That’s why consistent, clear, and familiar patterns and short, simplified forms are crucial in improving user conversion.

Here, we’ve defined the common input types, styles, modes, and layouts that Pega uses to drive results.

Input types

There are a variety of ways to have a conversation with your users. Below are the types of controls we currently support.

Supported input types are standard inputs, color pickers, search, datetime controls, select and combo boxes, radio groups and segments, checkboxes and toggles, rich text and text areas.

Interaction states

Give subtle cues to inform users of where they are in your form and what they are about to do.

Hover, focus, and active examples

Input modes

Inputs have various visual modes, such as read-only, disabled, or invalid. Each style informs users what can and cannot be done in that form.

Disabled, read-only, error, warning, and success examples

When to use an input

Figuring out which input to use at which time doesn’t need to be hard. Follow the suggested flowchart below to make the right decision.

Flowchart of when to use each input type

Last updated: Feb 2018

Get the files

Want to begin working with the Pega Design System? Download the vector assets below.

Download design files

Last updated: May 2017

Next: Buttons and links