--- layout : 'default' css : 'form' title : 'Form' description : 'A form is a collection of user input elements' type : 'UI Collection' --- <%- @partial('header') %>

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.

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

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

This example uses a ui segment to add the padding and background color. This is not required.

Username

Password

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

User Input

A textarea uses the default form element

User Text

UI Checkboxes allow a user to select individual options in a form

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

Checkbox

Slider

Toggle

Using checkboxes with HTML only, you must match the for attribute of your label to the id attribute of your checkbox.

Checkbox

Slider

Toggle

Radio boxes are a type of UI Checkboxes allowing only exclusive choice of options

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

Apples

Oranges

Pears

Grapefruit

Using checkboxes with HTML only, you must match the for attribute of your label to the id attribute of your checkbox.

Apples

Oranges

Pears

Grapefruit

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

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

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

Please enter your first name
Please enter your last name

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

First Name

Last Name

Gender

Username

Password

I agree to the terms and conditions

Submit

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

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

First Name

Last Name

Gender

Username

Password

I agree to the Terms and Conditions

Submit

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

You forgot your first name
And also your last name

First Name

Enter a first name

Last Name

Enter a last name

Username

Password

I agree to the Terms and Conditions

Submit

Individual fields may contain an error state

First Name

Last Name

Gender

Individual fields may be disabled or read only

First Name

Last Name

A form can take the width of its container

First Name

Last Name

Submit

A form can also be small or large

First Name

Last Name

Submit

First Name

Last Name

Submit

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

Please enter your first name
Please enter your last name

First Name

Last Name

I agree to the terms and conditions

Submit

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

Last name

A field can let users know they are for dates

Birthday

Fields can exist together side by side

Grouped fields automatically receive responsive styling, swapping to one field per row for mobile.

First name

Middle name

Last name

Fields can be aligned to a ui grid

First name

Middle name

Last name

Fields can be grouped to show related choices

Apples

Oranges

Pears

Grapefruit

Multiple fields may be inline in a row

Phone Number

Types

Form:

Elements

Field

Text Area

Javascript Checkbox

HTML Only Checkbox

Radio Box

HTML Only Radio Box

Select

Text Block

States

Form

Loading

Error

Warning

Form Fields

Error

Disabled

Variations

Forms

Fluid

Size

Inverted

Fields

Inline

Date

Groups

Fields

Responsive Element

Fields Grid

Grouped Fields

Inline