Form Controls

CCM has a suite of styles for both standard and custom form controls, as well as alerts, outlined below.

Quick Links

1. Standard Form Controls
2. Custom Form Controls
3. Alerts

Standard Form Controls

Containing forms in white boxes

• When displaying form elements, they should always be contained in a white box with a 1px border.
• H1, directional text and all form elements are contained in white box.
• Form should be centered on the webpage.
• Success, Error, Alert and caution messages should appear within the white box.
• White box should have a 20px padding on all sides

Standard Text Input

Form Element

• Use when collecting data and storing the parts in a database.
• The form label goes above the form field.

Placeholder Text

• Use on fields which have additional validation checks.
• Placeholder text examples:
• Email: username@email.com
• Phone: 5-555-555-5555
• Zip / Postal Code: 12345 or 12345-6789

Standard Text Input (disabled)

Disabled (Inactive) Field

• Use when you need to display read only text in a field.

Phone Number and Extension Inputs

Phone Number / Extensions

• Use when collecting a phone number.
• Always include an extension field beside the phone number field.
• The extension will never be required.
• The sum of the Phone Number and Extension form fields width should equal a single form field width (360 pixels).

Standard Text Area (Multi-line Input)

Text Area Form (Multi-line Input)

• Use when collecting data that is open-ended (comments, details, etc).
• Add scroll bars for content that extends past 100 pixels in height.

Select Menu (Dropdown)

Dropdown

• Use when users need to choose from five or more options.

Checkboxes

Checkboxes

• Use when a user can select any number of choices from a set list.
• Use when a user needs to choose “yes” or “no” on only one option (use standalone checkbox).
• Use when a user needs to see all the available options at a glance.

Radio Buttons

Radio Buttons

• Use when a user needs to select only one option of five or fewer total options.

Custom Form Controls

Datepicker

The Datepicker used by CCM UX Standards is powered by jQuery UI and requires jQuery. The plugin contains custom Javascript, CSS, and other configuration to meet this usage standard.

Date Collection

• Use when you need to collect a date (month, day, and year).
• Always use the Datepicker.
• The Datepicke should appear upon first click into the form field.
• Always include the calendar icon in the field.

Address Collection

Addresses are often dependent on the country or locale in which they are located. For this reason, address collection should be conditionally structure to offer users a convenient means to enter addresses based on the country chosen.

Address Collection

• Use when a collecting a mailing / shipping address.
• Address Line 2 should always be present and never required.
• US States will always be auto-selected on page load.
• When the United States is selected from the country dropdown, US States will be available in the state dropdown.
• When Canada is selected, from the country dropdown, Canadian Provinces will be available in the province dropdown.
• If another country other than the US or Canada is selected from the “Country / Region” dropdown, the state field will change from a dropddown to a form field.
• Zip / Postal Code validation should adjust accordingly based on country selection, adhering to the CCM validation library.

Alerts

Alert Usage

• As a notification that keeps people informed of the status of the system and which may or may not require the user to respond. This includes errors, warnings, and general updates.
• As a validation message that alerts someone that they just did something that needs to be corrected or as confirmation that a task was completed successfully.

Alert Types

There are four types of alert messages:

1. Default
2. Caution
3. Error
4. Success

Alerts have the following style properties:

• A width of 100% and a max-width of 780px.
• The ability to be made display:inline-block; with the class .alert-inline-block.

Default

Caution

Error

Success