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

Input
An Input is a field used to elicit a response from a user.

See:
ButtonFormIconLabel
src/elements/Input/Input.js
Semantic UI Input Docs

Types

Input

A standard input field.

States

Focus

An input field can show a user is currently interacting with it.

Loading

An icon input field can show that it is currently loading data.

Loading inputs automatically modify the input's icon on loading state to show loading indication.

An input field can show that it is currently loading data without an icon, too.

Disabled

An input field can show that it is disabled.

Error

An input field can show that the data contains errors.

Variations

Icon

An input can be formatted with an icon.

You can position the icon.

You can pass an Icon props object.

You can pass an Icon element.

You can pass an Icon child.

When using children, you must add a placeholder <input />.

Labeled

An input can be formatted with a label.

You can pass any element.

You can pass a Label props object.

You can pass a Label child.

Multiple Labels require children. When using children, you must add a placeholder <input />.

Action

An input can be formatted to alert the user to an action they may perform.

You can pass a Button props object.

You can pass any element.

Multiple Actions require children. When using children, you must add a placeholder <input />.

Transparent

A transparent input has no background.

Inverted

An input can be formatted to appear on dark backgrounds.

Fluid

An input can take on the size of its container.

Size

An input can vary in size.

Usage

Focus

An input can be focused via a ref.

Datalist

An input can be used with a datalist.

This is the bottom