Semantic UI React  3.0.0-beta.2
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypesMigration guide to v3
Elements
ButtonContainerFlagHeaderDividerImageIconLabelInputListLoaderPlaceholderRailRevealSegmentStep
Collections
FormGridMessageMenuTableBreadcrumb
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerEmbedModalDropdownPopupProgressRatingSearchSidebarStickyTransitionTab
Addons
PaginationConfirmPortalRadioSelectText 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.

Input Element

You can pass props (specially data attributes) to input by including an input element in children.

Datalist

An input can be used with a datalist.

This is the bottom
Blazing deployments by Vercel.