Dimensions

For number input, Soul defines two sizes in height: small and medium. The width varies in size based on content, layout, and design.

States

Number input has a series of states for both field and control elements: enabled, hover, focus, error, and disabled.

1. Enabled
   In most cases, the enabled state is a default state. An exception could be made when you need to speed up an obvious flow. For example, when a user opens a selection with a search, the search is immediately focused.
2. Focus
   A focused state communicates when a user has highlighted an element, using a keyboard or mouse and it is possible to enter a value.
3. Error
   An error state communicates a user or system mistake.
4. Disabled
   Number input in a disabled state indicates that an option exists but is not available given the circumstances. This can be used to maintain the layout's continuity and communicate that action may become available in the future. A disabled number input requires a tooltip explaining why the option is disabled.
5. Hover
   Buttons are in a hover state when the user's cursor is on the button but they haven't clicked on it yet.

Typography

The number of input titles should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. The number of input titles should be four words or less.