Solaris Design System

Inputs and textarea

Text inputs

These are just inputs that allow multiple types of inputs such as numbers, characters and strings.

States Emotive
Type: body-emotive
Height: 48px
padding: 11px 16px		 Productive
Type: body-productive
Height: 40px
Padding: 8px 12px		 Inline
Type: body-inline
Height: 32px
Padding: 8px 4px
:enabled Enabled input emotive theme light Enabled input emotive theme dark Enabled input productive theme light Enabled input productive theme dark Enabled input inline theme light Enabled input inline theme dark
:hover Hover input emotive theme light Hover input emotive theme dark Hover input productive theme light Hover input productive theme dark Hover input inline theme light Hover input inline theme dark
:active Active input emotive theme light Active input emotive theme dark Active input productive theme light Active input productive theme dark Active input inline theme light Active input inline theme dark
:focus Focus input emotive theme light Focus input emotive theme dark Focus input productive theme light Focus input productive theme dark Focus input inline theme light Focus input inline theme dark
:disabled Disabled input emotive theme light Disabled input emotive theme dark Disabled input productive theme light Disabled input productive theme dark Disabled input inline theme light Disabled input inline theme dark
:skeleton Skeleton input emotive theme light Skeleton input emotive theme dark Skeleton input productive theme light Skeleton input productive theme dark Skeleton input inline theme light Skeleton input inline theme dark
:valid Valid input emotive theme light Valid input emotive theme dark Valid input productive theme light Valid input productive theme dark Valid input inline theme light Valid input inline theme dark
:invalid Invalid input emotive theme light Invalid input emotive theme dark Invalid input productive theme light Invalid input productive theme dark Invalid input inline theme light Invalid input inline theme dark
:password Password input emotive theme light Password input emotive theme dark Password input productive theme light Password input productive theme dark Password input inline theme light Password input inline theme dark
:email Email input emotive theme light Email input emotive theme dark Email input productive theme light Email input productive theme dark Email input inline theme light Email input inline theme dark
:icon Icon input emotive theme light Icon input emotive theme dark Icon input productive theme light Icon input productive theme dark Icon input inline theme light Icon input inline theme dark
:helper Helper input emotive theme light Helper input emotive theme dark Helper input productive theme light Helper input productive theme dark Helper input inline theme light Helper input inline theme dark
:filled Filled input emotive theme light Filled input emotive theme dark Filled input productive theme light Filled input productive theme dark Filled input inline theme light Filled input inline theme dark
Text areas

When there is a time where there are multiple options that are selectable, a combobox is used. You can see the examples below shows the searchable option when the user slects the dropdown.

States Emotive
Type: body-emotive
Height: 104px
padding: 11px 16px		 Productive
Type: body-productive
Height: 104px
Padding: 8px 12px
:enabled Enabled textarea emotive theme light Enabled textarea emotive theme dark Enabled textarea productive theme light Enabled textarea productive theme dark
:hover Hover textarea emotive theme light Hover textarea emotive theme dark Hover textarea productive theme light Hover textarea productive theme dark
:active Active textarea emotive theme light Active textarea emotive theme dark Active textarea productive theme light Active textarea productive theme dark
:focus Focus textarea emotive theme light Focus textarea emotive theme dark Focus textarea productive theme light Focus textarea productive theme dark
:disabled Disabled textarea emotive theme light Disabled textarea emotive theme dark Disabled textarea productive theme light Disabled textarea productive theme dark
:skeleton Skeleton textarea emotive theme light Skeleton textarea emotive theme dark Skeleton textarea productive theme light Skeleton textarea productive theme dark
:valid Valid textarea emotive theme light Valid textarea emotive theme dark Valid textarea productive theme light Valid textarea productive theme dark
:invalid Invalid textarea emotive theme light Invalid textarea emotive theme dark Invalid textarea productive theme light Invalid textarea productive theme dark
:helper Helper textarea emotive theme light Helper textarea emotive theme dark Helper textarea productive theme light Helper textarea productive theme dark
:filled Filled textarea emotive theme light Filled textarea emotive theme dark Filled textarea productive theme light Filled textarea productive theme dark
:filled-limit Filled limit input textarea theme light Filled limit input textarea theme dark Filled limit input textarea theme light Filled limit input textarea theme dark

Usage

There are instances where users require to enter both short and long form content. Text inputs and text areas enable users to interact with the page and input content and data.

Type Use
Text When the expected input is a single line of text.
Textarea When the expected input is more than one sentence and requires line breaks.