--- layout : 'default' css : 'form' element : 'form' elementType : 'collection' title : 'Form' description : 'A form displays a set of related user input fields in a structured way' type : 'UI Collection' themes : ['Default', 'Flat', 'Chubby', 'GitHub'] --- <%- @partial('header') %>

Types

Form

Forms always include fields, and fields always contain form elements. Fields themselves may also include: inputs, standard form fields, labels, selection dropdowns, textareas, as well as: checkboxes, and message blocks.

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

Validation messages use messages which are formatted for use inside forms.

Personal Information

Account Info

Optional Survey

Settings

Privacy
Newsletter Subscriptions
We noticed some issues
Register

Elements

Field

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

Text Area

A textarea uses the default form element

Checkbox

UI Checkboxes are styled forms of standard form checkboxes.

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

Select

A selection dropdown, a type of ui dropdown can be used to allow for a selection from multiple choices

$('.ui.selection.dropdown') .dropdown() ;

Radio Box

Radio boxes are styled forms of standard form radio controls.

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

Text Block

Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.

We had some issues
  • Please enter your first name
  • Please enter your last name

States

Form

Loading

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

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!
  • You forgot your first name
  • And also your last name
Submit

Form Fields

Error

Individual fields may contain an error state

Disabled

Individual fields may be disabled or read only

Variations

Forms

Fluid

A form can take the width of its container

Submit

Size

A form can also be small or large

Submit


Submit

Inverted

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

We had some issues
  • Please enter your first name
  • Please enter your last name
Submit

Fields

Inline

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

Required

A field can format itself to show that an input is mandatory

Groups

Fields

Fields can exist together side by side

Responsive Element

Split Width Fields automatically receive responsive styling, swapping to one field per row for mobile.

Grouped Fields

Fields can be grouped to show related choices

Inline

Multiple fields may be inline in a row