Form

A form

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

Name

Billing Address

State

Country

Card Type

Card Number

CVC

Expiration

Send Receipt To:

Do not include a receipt in the package

Submit Order

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

User Input

A set of fields can appear grouped together

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

First name

Middle name

Last name

First name

Middle name

Last name

Name

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

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

Text

Short Text

A form can contain a checkbox

UI checkbox are special, styled versions of standard HTML checkboxes.

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

Checkbox

Slider

Toggle

A form can include a radio checkbox

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

Select your favorite fruit:

Apples

Oranges

Pears

Grapefruit

Select your second favorite fruit:

Apples

Oranges

Pears

Grapefruit

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() ;

Gender

Country

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

Country

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

A form can contain a calendar

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

Date

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.

Please enter your first name
Please enter your last name

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.

E-mail

Submit

E-mail

Submit

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

E-mail

You're all signed up for the newsletter.

Submit

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

E-mail

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

Submit

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

E-mail

That e-mail has been subscribed, but you have not yet clicked the verification link in your e-mail.

Submit

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

New Password

Password must contain at least 8 characters

Submit

Individual fields may display an error state

First Name

Last Name

Gender

I agree to the Terms and Conditions

Individual fields may display a warning state

First Name

Last Name

Gender

I agree to the Terms and Conditions

Individual fields may display a Success state

Username

Last Name

Gender

I agree to the Terms and Conditions

Individual fields may display an informational state

First Name

Last Name

Gender

I agree to the Terms and Conditions

Individual fields may be disabled

First Name

Last Name

Individual fields may be read only

First Name

Last Name

A form can vary in size

First Name

Last Name

Submit

First Name

Last Name

Submit

First Name

Last Name

Submit

First Name

Last Name

Submit

First Name

Last Name

Submit

First Name

Last Name

Submit

First Name

Last Name

Submit

Forms can automatically divide fields to be equal width

Username

Password

First name

Middle name

Last name

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

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 specify its width in grid columns

First name

Middle

Last name

A field can show that input is mandatory

Last name

I agree to the terms and conditions

A textarea can appear transparent

Description

Fields can have their widths divided evenly

First name

Middle name

Last name

Fields can show related choices

Apples

Oranges

Pears

Grapefruit

Fields can automatically divide fields to be equal width

Username

Password

First name

Middle name

Last name

Multiple fields may be inline in a row

Phone Number

What's your favorite fruit?

Apples

Oranges

Pears

Grapefruit

Types

Shipping Information

Billing Information

Receipt

Content

Field

Fields

Text Area

Checkbox

Radio Checkbox

Dropdown

Multiple Select

HTML Select

Calendar

Message

Form States

Loading

Success

Error

Warning

Info

Field States

Field Error

Field Warning

Field Success

Field Info

Disabled Field

Read-Only Field

Form Variations

Size

Equal Width Form

Inverted

Field Variations

Inline Field

Width

Required

Transparent Textarea

Group Variations

Evenly Divided

Grouped Fields

Equal Width Fields

Inline Fields

Dimmer Message Dimmer sub-header

Dimmer Message
Dimmer sub-header