# Input

An input lets users enter and edit text or numerical values in forms.


## Overview

### Variants

To be able to use forms in all context's we provide two versions of input fields.

*   **Default**
    
*   Coming soon **Floating label** (label inside): Can only be used in specific contexts. Limited features due to accessibility. Read more about how to use the Floating label on the UX text page [Input field floating label](https://seb.io/component/input/ux-text#input-field-floating-label-5)

#### Sizes

The input field comes in two sizes.

*   **Large**
    
*   **Small**: used in tables and in some special cases where the space is very limited.

### Features

#### Label

All input fields must have a label to ensure clarity and accessibility. Labels help users understand the purpose of the field, including those using assistive technologies.

#### Optional field indicator

We only ask for required information. If some fields are optional, we let users know by adding "(optional)" in brackets next to the field label.

#### Support text

Use this to explain how to fill in the field, for example how to count or what to include.

### Contextual help

If the label and support text are not enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.

*   Use a tooltip if space is limited.
    
*   Use a modal for large amounts of text.

### Leading icon

A leading icon visually reinforces the purpose of the field, helping users to understand what type of information is needed. For example: search fields or card number.

#### Clearable

To make it easy for users to clear a field, an x-icon button can be placed at the end of the field. This is commonly used in search/filter forms.

#### Badge

Use it to show what the unit input value is.

For example: EUR

#### Error message

Used to indicate that a selection must be made from the dropdown or that there is an error with the selected option.

#### Character counter

For fields with a character limit, a counter can be added to show users how many characters they have left.

The counter starts with the maximum allowed characters. As the user types, the remaining characters decrease. When the limit is nearly reached, the counter turns yellow. When or if the user exceeds the limit, the counter turns red.

If the user ignores this and attempts to submit, an error message will appear indicating that the maximum character limit has been reached.

#### Dynamic information

(Not available for Floating label variant) Used to perform comparative calculations next to the field.

#### Placeholder

Avoid using placeholder text (also known as watermark), as it can confuse users into thinking the field is already filled with data. Instructions should not be placed in the field, as they disappear once the user starts typing. Instead, use support text to guide users on what should be entered.

### Do’s and dont’s


## UX Guidelines

### Input field default

### Labels

### Single-word or complete sentence

### Write the time period in the label

### Avoid fixed text inside the field

### Display the currency with a badge

### Placeholder text

### Labels do’s and dont’s

### Error message

### Input field floating label

### Do’s and dont’s input field floating label

### Default or floating label?

### Search field

### Label support text for search field

### Give ideas with examples

### Search feedback