Forms - default

Text fields

Text Entry

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 width input
Error message here
Long width input
Full width input
help
Medium width input. Should have placeholder text on IE9 due to the placeholder polyfill
Medium-long width input
mins secondsselect user
Small width input

Woah! Something went wrong!

The savepoints are really far apart in this level.

Ensure passwords match

File Upload

File Upload

Dropdowns and Selects

Dropdowns and Selects
Single select - use the size attribute to set the number of rows
Multi select - use the size attribute to set the number of rows
Select Date
pick a date range
Date out of range
Specific date select fieldset to allow for multiple (hidden) labels

Textarea

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

Groups (checkboxes and radios)

Checkboxes Editrequired
You must select one option

More Checkboxes

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

You can also have a description here if you like

and/or errors
Or, you can have a description here for the fieldset as a whole.

One Checkbox

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).

Assistive Legend to give context for screen readers. If you don't know what to put in here, ask your nearest frontend developer.
You can have a description here
You can also have a description here if you like

Legend length testing

Long legend text now wraps without overflowing the containing .group

Multi Column checkboxes

Checkbox Matrix
The field hasn't been submitted!

Radio Buttons

Radio Buttons required
The field hasn't been submitted!
This is a description
Radio Matrix (deprecated)

Field Value State

Text Entry
My First Name
Descriptive text here.
My Last Name
Descriptive text here.
my@email.com
Descriptive text here.
Checkboxes View
Radio Buttons

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

Deprecated: Right aligned buttons

This short form has right-aligned buttons such as you might see in a Dialog. Its .buttons-container has a class of .right and the buttons are thus aligned right. It is shaded only to show the width of the form.

Button Spacing

1:p (bunch of stuff here to check the zero font size trick isn't blatting extra elements.

2:div
6,7: Legend (set to display:inline-block) in fieldset to reveal it

content inside fieldset

9: a link

Field icons

Error

Soy

Default

Default checkbox field
Default radio field
My Value

With extra classes

Extra classes checkbox field
Extra classes radio field
My Value