Input

A standard input

A file input

If you want the trigger button having a custom text or an icon, you should use a File Action Input

A file input can be made invisible so you are able to design another element to trigger the file dialog.

To accomplish this, you have to use a corresponding <label> element. This can be styled as desired, most probably as a button element

In order to support button highlighting on key tabbing, the label element has to be placed immediatly after the invisible input element.

Open any file

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

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 disabled

An input field can show the data contains errors

Some input types like "week", "date", "email", "url", etc. have a browser inbuild validation and will automatically get the error styling when those get invalid. In general all input field types, which have the required attribute set and are empty, are considered invalid.

To prevent showing the error class on empty and required fields, use a placeholder. If you don't want a textual placeholder use a space character.

An input can be formatted with an icon

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

An input can be formatted with a label

https://

.00

Add Tag

I am a

Persons

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

A File action input allows custom content inside the file trigger button. File action input buttons have to be made out of a label element.

Although left action also works with file action inputs, in order to support button highlighting on key tabbing, the action button needs to be placed after the file input so it appears to the right.

Choose wisely

A transparent input has no background

An input can be formatted to appear on dark backgrounds

An input can take the size of its container

An input can vary in size

Inputs will automatically size themselves unless you manually declare a width

Using the input class you can also use some features on textarea as well

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

Types

File Input

Invisible File Input

States

Focus

Loading

Disabled

Error

Variations

Icon

Labeled

Action

File Action

Transparent

Inverted

Fluid

Size

Textarea

Dimmer Message
Dimmer sub-header