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

## Right-aligned labels

### Basic Form

Email
Password
Remember me

### All Fields Required

All fields are required.

Field One
Field Two
Field Three

### Required and Optional Fields

The fields marked with * are required.

Field One
Field Two
Field Three

### All Fields Optional

All fields are optional.

Field One
Field Two
Field Three

### 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

Email address
Password
File input

Example block-level help text here.

Check me out

### All Fields Required

All fields are required.

Field One
Field Two
Field Three

### Required and Optional Fields

The fields marked with * are required.

Field One
Field Two
Field Three

### All Fields Optional

All fields are optional.

Field One
Field Two
Field Three

## Inline Form

Email address
Password
Remember me

## 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

#### Edit Blueprint Details

{% include widgets/forms/expand-collapse-section.html id-blueprintname="AdvOptBlueprintNameMod" id-catalog="AdvOptCatalogMod" id-number="AdvOptNumberMod" id-entry1="AdvOptEntry1Mod" id-entry2="AdvOptEntry2Mod" id-entry3="AdvOptEntry3Mod" id-fieldsection="AdvOptSectionMod" is-modal=true col-size-label="3" col-size-field="9" %}

## Controls

Option one is this and that—be sure to include why it's great
Option one is this and that—be sure to include why it's great
Option two can be something else and selecting it will deselect option one
1 2 3

### Count Remaining Characters Control

### Static Control

Email

email@example.com

Password

### 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

Disabled input
Disabled select menu
Can't check this
Input with success
Select with success
Input with warning
Select with warning
Input with error
Select with error