Forms - inline help

Default Layout with Inline Help

Heading h2

Heading h3

Paragraph: Lorem ipsum dolor sit amet, consectetur span text adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Default - Edit State

Text Entry
help
Default width input.
help
Error message here
Long width input.
help
Medium width input.
mins secondsselect userhelp
Small width input.
help
help

File Upload

File Upload/
help
help

Dropdowns and Selects

Dropdowns and Selects
help
Medium width select.
help
Multiselect - 250px min width (except ie, variable width).
Select Date
pick a date rangehelp
Date out of range
Specific date select fieldset to allow for multiple (hidden) labels

Textarea

Textarea Legend
select userhelpEnter your commercial or evaluation license key.
Not got a license? Generate an evaluation license

Groups (checkboxes and radios)

Checkboxes Editrequired
help
help
You must select one option

More Checkboxes

Checkboxes Legend
help
You can have a description here
help
You can have a description here
and/or an error

You can also have a description here if you like

and/or errors

One Checkbox

Assistive Legend to give context for screen readers. If you don't know what to put in here, ask your nearest frontend developer.

The visible legend is optional - you may not want it for the single checkbox. You can make it an assistive legend (view source to see it).

help
You can have a description here

You can also have a description here if you like

Multi Column checkboxes

Checkbox Matrix
help

Radio Buttons

Radio Buttons
help
help
help
Radio Matrix
help

Field Value State

Text Entry
My First Namehelp
Descriptive text here.
My Last Namehelp
Descriptive text here.
my@email.comhelp
Descriptive text here.
help
Checkboxes View
help
help
Radio Buttons
help
help
help

Pre text area

BAM2573-BAMFUNC-18 Dependant of BAM2573-HEAD-40 ** LONG STRING ** 100 passedBAM2573-BAMFUNC-17Dependant of BAM2573-HEAD-262 months ago (06:11 PM, Fri, 15 Aug) failedAM2573-BAMFUNC-16Dependant of BAM2573-HEAD-252 months ago (06:08 PM, Thu, 14 Aug) 30 minutes3 out of 100 failedAM2573-BAMFUNC-16Dependant of BAM2573-HEAD-252 months ago (06:08 PM, Thu, 14 Aug)

Paragraph: span text, in a paragraph the inline-text class is not required Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

input class="button" vs HTML button

Cancel

Long Labels

Default - Edit State

Text Entry
help
Default width input.
help
Error message here
Long width input.
help
Medium width input.
minssecondsselect userhelp
Small width input.
help
help

File Upload

File Upload/
help

Dropdowns and Selects

Dropdowns and Selects
help
Medium width select.
help
Multiselect - 250px min width (except ie, variable width).
Select Date
pick a date rangehelp
Date out of range
Specific date select fieldset to allow for multiple (hidden) labels

Textarea

Textarea Legend
select userhelpEnter your commercial or evaluation license key.
Not got a license? Generate an evaluation license

Groups (checkboxes and radios)

Checkboxes Edit
help
help
You must select one option

More Checkboxes

Checkboxes Legend
help
You can have a description here
help
You can have a description here
and/or an error

You can also have a description here if you like

and/or errors

One Checkbox

Assistive Legend to give context for screen readers. If you don't know what to put in here, ask your nearest frontend developer.

The visible legend is optional - you may not want it for the single checkbox. You can make it an assistive legend (view source to see it).

help
You can have a description here

You can also have a description here if you like

Multi Column checkboxes

Checkbox Matrix
help

Radio Buttons

Radio Buttons
Radio Matrix
help

Field Value State

Text Entry
My First Namehelp
Descriptive text here.
My Last Namehelp
Descriptive text here.
my@email.comhelp
Descriptive text here.
Checkboxes View
help
help
Radio Buttons
help
help
help

Pre text area

BAM2573-BAMFUNC-18 Dependant of BAM2573-HEAD-40 ** LONG STRING ** 100 passedBAM2573-BAMFUNC-17Dependant of BAM2573-HEAD-262 months ago (06:11 PM, Fri, 15 Aug) failedAM2573-BAMFUNC-16Dependant of BAM2573-HEAD-252 months ago (06:08 PM, Thu, 14 Aug) 30 minutes3 out of 100 failedAM2573-BAMFUNC-16Dependant of BAM2573-HEAD-252 months ago (06:08 PM, Thu, 14 Aug)

Paragraph: span text, in a paragraph the inline-text class is not required Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

input class="button" vs HTML button

Cancel

Inline Form

Inline form - add class inline to fieldset

Find User to Add
Show all usershelp

Top Labels

Top Labels - add class top-label to form

New Issue
help
help

Groups (checkboxes and radios)

Checkboxes Legend
help
You can have a description here
help
You can have a description here
and/or an error

You can also have a description here if you like

and/or errors

One Checkbox

Checkbox Legend
help
You can have a description here

You can also have a description here if you like

Radio Buttons

Radio Buttons
help
help
help