Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagIconHeaderImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText AreaTransitionable Portal

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

See:
ButtonCheckboxDropdownInputMessageRadioSelectVisibility
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.

<Form.Input label='Enter Password' type='password' />

vs

<Form.Field>
  <label>Enter Password</label>
  <Input type='password' />
</Form.Field>

Field with Custom Control

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

<Form.Field label='Date' control={CustomCalendar} start='1' end='7' />

vs

<Form.Field>
  <label>Date</label>
  <CustomCalendar start='1' end='7' />
</Form.Field>

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.

<Form.Field label='Quantity' control='input' type='number' max={5} />

vs

<Form.Field>
  <label>Quantity</label>
  <input type='number' max={5} />
</Form.Field>

Accessible Labels

Adding an id to a shorthand Form.Field 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.

Form.Field 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 Form.Group, all child Form.Dropdown, Form.Input, Form.Selectcomponents 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