--- categories: [Widgets] layout: page title: Forms resource: true ---

Right-aligned labels

Basic Form

All Fields Required

All fields are required.

Required and Optional Fields

The fields marked with * are required.

All Fields Optional

All fields are optional.

Error Feedback

{% include widgets/forms/input-validation-form.html id-default="exampleInput" id-disabled="exampleInputDisabled" id-error="exampleInputError" has-error=true %}

Top-aligned labels

Basic Form

Example block-level help text here.

All Fields Required

All fields are required.

Required and Optional Fields

The fields marked with * are required.

All Fields Optional

All fields are optional.

Inline Form

Inside a modal

{% include widgets/forms/input-validation-modal.html id-default="modalInput" id-disabled="modalInputDisabled" id-error="modalInputError" has-error=true %}

Expand-Collapse Section

{% include widgets/forms/expand-collapse-section.html id-blueprintname="AdvOptBlueprintName" id-catalog="AdvOptCatalog" id-number="AdvOptNumber" id-entry1="AdvOptEntry1" id-entry2="AdvOptEntry2" id-entry3="AdvOptEntry3" id-fieldsection="AdvOptSection" is-modal=false col-size-label="2" col-size-field="10" %}

Expand-Collapse Section inside a modal

Controls

Count Remaining Characters Control


Static Control

email@example.com

Help Text

A block of help text that breaks onto a new line and may extend beyond one line.
@

Control Sizing

Input Groups

Basic Example

.00
$ .00

Sizing

@
@
@

Checkboxes and radio addons

Button addons

Buttons with dropdowns

Segmented buttons

Form States