Status
Status
Status
Status
Figma component
Includes a link to a Figma component that has been imported to Supernova
For general text input, such as names, addresses, and other string data.
For securely entering passwords, where the input is masked.
For entering numerical amounts, such as currency or quantity.
An input field that includes a prefix label (or icon), providing additional context for the type of data to be entered.
An input field that includes an icon on the right side, indicating additional functionality or information related to the input.
For selecting or entering dates with a calendar.
For select a date between dates.
Time picker is for selecting or entering time values with browsers’ time picker.
An input field that allows the selection of multiple options from a predefined list, providing flexibility in data input.
Select is for selecting a single option from the overflow menu.
A larger, multi-line input field for entering extended text or descriptions.
Small inputs are used in areas that require smaller-scale input usage such as in tables, cards, widgets.
Default size inputs are primarily used in forms and modals.
Large size inputs are used in login/sign-up flows.
The outline-white should be used when the layout or background color is gray-5 or gray-10
The outline input should be used when the layout or card background is mainly white or in background-surface color to balance the contrast.
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. |
A form input should stretch to fill its parent container.
However, in areas such as form layout or container, be cautious of the width; set widths that will create visual hierarchy and balance.
A form input should stretch to fill its parent container.
However, in areas such as form layout or container, be cautious of the width; set widths that will create visual hierarchy and balance.
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.
When the entered text exceeds the available space, wrap the text with an ellipsis (three dots).
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 state (or busy) input field when data is being loaded or processed asynchronously, displaying a loading spinner and keep the input field disabled.
Labels is for clearly describe the purpose of the input field, ensuring users understand what information is required. Labels should be concise yet descriptive.
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.
Use counters to help users stay within character limits and provide immediate feedback on their input length.
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.
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.