Form

UI Collection: Form

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

Download

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.

Name

Gender

State

Biography

Username

Password

Would you like us to import your current settings?

Yes

Allow anyone to see my account

Allow only friends to see my account

Top Posts This Week

Hot Deals

I agree to the Terms of Service.

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 are styled forms of standard form checkboxes.

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

Checkbox

Slider

Toggle

A selection dropdown is a type of ui dropdown designed for user selection. Dropdown will automatically convert select elements initialized as dropdowns.

$('select.dropdown') .dropdown() ;

Gender

A search selection is a special type of ui dropdown designed for selecting between many choices.

Country

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

Radio boxes are styled forms of standard form radio controls.

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

Select your favorite fruit:

Apples

Oranges

Pears

Grapefruit

Select your second favorite fruit:

Apples

Oranges

Pears

Grapefruit

Messages 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

Last Name

Username

Password

I agree to the Terms and Conditions

Submit

Individual fields may display an error state

First Name

Last Name

Gender

I agree to the Terms and Conditions

Individual fields may be disabled or read only

First Name

Last Name

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

Last name

Fields can specify their width in grid columns

First name

Middle

Last name

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

Last name

I agree to the terms and conditions

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

Fields can exist together in a group

First name

Middle name

Last name

Groups can have their widths divided evenly

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

First name

Middle name

Last name

Fields can show related choices

Apples

Oranges

Pears

Grapefruit

Multiple fields may be inline in a row

Phone Number

Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.

Translation Hub Issue Tracker CLA Create Themes

Legacy Docs Learn Semantic Semantic Themes Semantic Layouts

UI Framework

Standalone

Package Managers

Package Managers

Types

Form

Personal Information

Account Info

Import Settings

Settings

Privacy

Newsletter Subscriptions

Elements

Field

Text Area

Checkbox

Selection Dropdown

Search Selection Dropdown

Basic Select

Radio Box

Message

States

Form

Loading

Error

Warning

Form Fields

Error

Disabled

Variations

Fields

Inline

Field Width

Required

Forms

Fluid

Size

Inverted

Groups

Fields

Evenly Divided

Responsive Element

Grouped Fields

Inline

Help Make Semantic UI Better

Contribute

Semantic Network

Dimmer Message Dimmer sub-header

Dimmer Message
Dimmer sub-header