Menu
Input
UI Docs
Getting Started New in 2.4
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step
Collections
Breadcrumb Form Grid Menu Message Table
Views
Advertisement Card Comment Feed Item Statistic
Modules
Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition
Behaviors
API Form Validation Visibility

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

2 Themes
Download

UI Framework

Themable
Build Tools
Choose

Standalone

Default Theme
Precompiled
Choose
Semantic UI
Download ZIP Getting Started

Package Managers

Standalone Input
Download ZIP View GitHub

Package Managers

Types

Input

A standard input

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

Disabled

An input field can show that it is disabled

Error

An input field can show the data contains errors

Variations

Icon

An input can be formatted with an icon

Input icons do not receive pointer-events unless a link icon is used.

Labeled

An input can be formatted with a label

http://
.com
.com
.net
.org
kg
.00
Add Tag

Action

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

This Page
This Organization
Entire Site
Search

Transparent

A transparent input has no background

Inverted

An input can be formatted to appear on dark backgrounds

Fluid

An input can take the size of its container

Search

Size

An input can vary in size

Inputs will automatically size themselves unless you manually declare a width

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Free & Open Source (MIT)
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header