Semantic UI: Form

Form

Forms are a grouping of elements requiring user input.

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

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

Standard

States

Variations

Group

Standard

Form:

A form is a collection of user input elements, and has no stylings of its own.

Let's go ahead and get you signed up.

First Name

Last Name

Username

Password

I agree to the terms and conditions

Submit

Types of Content

Field

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

User Input

Text Area

A textarea uses the default form element

User Text

Checkbox

Checkboxes are styled forms of standard form checkboxes.

Checkbox (Using attribute ID to trigger checked event)

Checkbox (Javascript)

Validation

Text blocks have special meaning inside a form tag. All message blocks are hidden by default.

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:

First Name

Last Name

Username

Password

I agree to the terms and conditions

Submit

Error

If 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

Username

Password

I agree to the terms and conditions

Submit

Warning

If 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

Last Name

Username

Password

I agree to the terms and conditions

Submit

Form Fields

Error

Individual fields may contain an error state

First Name

Last Name

Disabled

Individual fields may be disabled or read only

First Name

Last Name

Variations

Fluid

A form can take the width of its container

First Name

Last Name

Submit

Size

A form can also be small or large

Please enter your first name
Please enter your last name

First Name

Last Name

Submit

Please enter your first name
Please enter your last name

First Name

Last Name

Submit

Fields

Inline

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

Last name