Status
Status
We’ll soon separate input types, as in HTML attributes, both in the Figma components and the documentation gradually.
Healthy
Figma component
Includes a link to a Figma component that has been imported to Supernova
Principles
Use when
- information that needs to be manually collected from the user, such as contact names, customer addresses, or company addresses.
- specifying stock or price for a product or service.
- gathering login/sign up information from users during system access.
- for any input that can be collected using a text input field.
Don't use when
- input field is used solely for displaying data and does not require any user interaction.
- the content is static and does not need to be editable by the user.
Structure
- Input label (required)
- Icon
- Count value
- Text area (required)
- Trailing icon
- Helper text
Properties
Types
Text (input) field
For general text input, such as names, addresses, and other string data.
Password
For securely entering passwords, where the input is masked.
Amount
For entering numerical amounts, such as currency or quantity.
Prefix label (or icon)
An input field that includes a prefix label (or icon), providing additional context for the type of data to be entered.
With trailing icon
An input field that includes an icon on the right side, indicating additional functionality or information related to the input.
Date
For selecting or entering dates with a calendar.
Date-range
For select a date between dates.
Time
Time picker is for selecting or entering time values with browsers’ time picker.
Multi-select
An input field that allows the selection of multiple options from a predefined list, providing flexibility in data input.
Select
Select is for selecting a single option from the overflow menu.
Text-area
A larger, multi-line input field for entering extended text or descriptions.
The other input types such as checkbox, radio, toggle, file uploader, are defined separately on their pages.
Sizes
Small
Small inputs are used in areas that require smaller-scale input usage such as in tables, cards, widgets.
Default
Default size inputs are primarily used in forms and modals.
Large
Large size inputs are used in login/sign-up flows.
Style
Outline-white
The outline-white should be used when the layout or background color is gray-5 or gray-10
Outline
The outline input should be used when the layout or card background is mainly white or in background-surface color to balance the contrast.
States
|
Enabled |
The enabled state is the default state where the input field is ready for user interaction and accepts input. |
|---|---|
|
Hover |
The hover state indicates interactivity when the cursor is on the input field by changing the border color. |
|
Focus |
The focus state is when the input is focused, typically after a user clicks on it or navigates to it using the keyboard. |
|
Active |
The active state is when the input is actively being used and ready for the user to type an input. |
|
Destructive |
The destructive input indicates that the input may have invalid data." |
|
Warning |
The warning indicates that there is a potential issue with the input. |
|
Disabled |
The disabled state is for where the input is non-interactive and grayed out, indicating it is not currently usable. |
Behavior
Width
Do
A form input should stretch to fill its parent container.
Don’t
However, in areas such as form layout or container, be cautious of the width; set widths that will create visual hierarchy and balance.
Icon usage
Do
A form input should stretch to fill its parent container.
Don’t
However, in areas such as form layout or container, be cautious of the width; set widths that will create visual hierarchy and balance.
Placeholder
Placeholder refers to the text displayed within the input field when it is empty, typically serving as a hint or example of the expected data.
However, placeholders should not be used for cases that cannot be easily predicted, such as filling in customer/supplier names or company information, legal information, product/service names/types, and similar cases.
Truncation
Do
When the entered text exceeds the available space, wrap the text with an ellipsis (three dots).
Don’t
If the input text exceeds a single line in length, the input container should not stretch to fit two lines unless it’s not text-area.
Loading
Loading state (or busy) input field when data is being loaded or processed asynchronously, displaying a loading spinner and keep the input field disabled.
Label
Labels is for clearly describe the purpose of the input field, ensuring users understand what information is required. Labels should be concise yet descriptive.
Label icon
A label icon can be used to provide information via a tooltip when hovered over, especially if the input is for data that is not widely known.
Counter
Use counters to help users stay within character limits and provide immediate feedback on their input length.
Helper text
Helper text is used to provide additional information about the data to be entered in an input or to display error/warning messages related to the validation of the data. More info about helper text its own component documentation here.
Content
Labels must be written in sentence case and avoid using wordy or complex terms in labels.
Helper text must be concise and not too long, be direct to give the related message.