Menu

Form
A form displays a set of related user input fields in a structured way

Types

Form

A form

If you are looking for validation you should check out form behaviors.

Shipping Information

Billing Information

Receipt

Submit Order

Content

Field

A field is a form element containing a label and an input

Fields

A set of fields can appear grouped together

Field groups automatically receive responsive styling, swapping to one field per row on mobile devices.

Text Area

A textarea can be used to allow for extended user input.

To specify an approximate text area size use the rows attribute.

Checkbox

A form can contain a checkbox

UI checkbox are special, styled versions of standard HTML checkboxes.
$('.ui.checkbox') .checkbox() ;

Radio Checkbox

A form can include a radio checkbox

$('.ui.radio.checkbox') .checkbox() ;

Dropdown

A form can contain a dropdown

Dropdown will automatically convert select elements initialized as dropdowns. For more details check out the dropdown docs
$('.selection.dropdown') .dropdown() ;

Multiple Select

A multiple select is used to include several choices with one form field

HTML Select

If Javascript or ui dropdown are not a viable option, forms also can provide basic styling for select elements

Calendar

A form can contain a calendar

$('.ui.calendar').calendar({ type: 'date' });

Message

A form can contain a message

Any info, error, success, or warning message blocks found inside a form are hidden by default.
If you want to force a message inside a form being visible all the time, add the visible class to the message.
We had some issues
  • Please enter your first name
  • Please enter your last name

Form States

Loading

If a form is in loading state, it will automatically show a loading indicator.

elastic as loading style is currently not supported because form uses the :before pseudoclass to dim the background.
Submit
Submit

Success

If a form is in an success state, it will automatically show any success message blocks.

Form Completed

You're all signed up for the newsletter.

Submit

Error

If a form is in an error state, it will automatically show any error message blocks.

Action Forbidden

You can only sign up for an account once with a given e-mail address.

Submit

Warning

If a form is in warning state, it will automatically show any warning message block.

Could you check something!
  • That e-mail has been subscribed, but you have not yet clicked the verification link in your e-mail.
Submit

Info

If a form is in informational state, it will automatically show any info message block.

Requirements
  • Password must contain at least 8 characters
Submit

Field States

Field Error

Individual fields may display an error state

Field Warning

Individual fields may display a warning state

Field Success

Individual fields may display a Success state

Field Info

Individual fields may display an informational state

Disabled Field

Individual fields may be disabled

Read-Only Field

Individual fields may be read only

Form Variations

Size

A form can vary in size

Submit
Submit
Submit
Submit
Submit
Submit
Submit

Equal Width Form

Forms can automatically divide fields to be equal width

Inverted

A form on a dark background may have to invert its color scheme

Submit

Field Variations

Inline Field

A field can have its label next to instead of above it.

Width

A field can specify its width in grid columns

Required

A field can show that input is mandatory

Transparent Textarea

A textarea can appear transparent

Group Variations

Evenly Divided

Fields can have their widths divided evenly

Grouped Fields

Fields can show related choices

Equal Width Fields

Fields can automatically divide fields to be equal width

Inline Fields

Multiple fields may be inline in a row

Dimmer Message
Dimmer sub-header