Semantic UI React  3.0.0-beta.2
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypesMigration guide to v3
Elements
ButtonFlagContainerHeaderDividerImageIconLabelInputListPlaceholderLoaderRailRevealStepSegment
Collections
BreadcrumbFormMessageMenuGridTable
Views
CommentFeedStatisticCardItemAdvertisement
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSidebarSearchTabStickyTransition
Addons
ConfirmRadioPortalSelectPaginationText AreaTransitionable Portal

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

See:
ButtonCheckboxDropdownInputMessageRadioSelect
src/collections/Form/Form.js
Semantic UI Form Docs
FormForm.ButtonForm.CheckboxForm.DropdownForm.FieldForm.GroupForm.InputForm.RadioForm.SelectForm.TextArea

Types

Form

A form.

Forms also have a robust shorthand props API for generating controls wrapped in FormFields. See shorthand examples below.

Shorthand

Form Subcomponents

Render a field containing a label and form control. All form control components are available.

<FormInput label='Enter Password' type='password' />

vs

<FormField>
  <label>Enter Password</label>
  <Input type='password' />
</FormField>

Field with Custom Control

Render a field containing a label and custom form control. Use any component from any library, or your own.

<FormField label='Date' control={CustomCalendar} start='1' end='7' />

vs

<FormField>
  <label>Date</label>
  <CustomCalendar start='1' end='7' />
</FormField>

Field with Custom Label

You can define a label with props object.

You can define a label by passing your own element.

Field with HTML Control

The field control prop also works with HTML tags.

<FormField label='Quantity' control='input' type='number' max={5} />

vs

<FormField>
  <label>Quantity</label>
  <input type='number' max={5} />
</FormField>

Accessible Labels

Adding an id to a shorthand FormField adds a matching htmlFor prop to the label. In case of an error, the aria-describedby prop is used to connect the error label to the form field.

Adding an id to a Form subcomponent adds a matching htmlFor prop to the label.

Content

Field

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

States

Loading

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

Success

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

Error

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

Warning

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

Field Error

Individual fields may display an error state.

Disabled Field

Individual fields may be disabled.

Read-Only Field

Individual fields may be read only.

Form Variations

Size

A form can vary in size.

Inverted

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

A form can prevent itself from stacking on mobile.

Field Variations

Inline

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

Width

A field can specify its width in grid columns.

Required

A field can show that input is mandatory.

FormField shorthand can also be required.

Group Variations

Evenly Divided

Fields can have their widths divided evenly.

When using the widths='equal' prop declaration on a FormGroup, all child FormDropdown, FormInput, FormSelectcomponents must be rendered with a fluid prop to work correctly.

Inline

Multiple fields may be inline in a row.

Unstackable

A form group can prevent itself from stacking on mobile, too.

Usage

Tip

Our <Form /> handles data just like a vanilla React <form />. See React's controlled components docs for more.

Capture Values

You can capture form data on change or on submit.

Clear On Submit

You can clear form values on submit.

This is the bottom
Blazing deployments by Vercel.