Inputs - Design

Cherry offers several variations for input elements, which play a crucial role in the user interface. Inputs facilitate user interaction with our applications. While there are no color variations for inputs, we provide two different sizes: default and big. Inputs can have an error or success state to provide feedback to the user.

When customizing your designs, it’s crucial to consider all the different states that inputs can have:

  1. Normal State The default appearance of the input.
  2. Hover State (:hover) The appearance when the user hovers the cursor over the input.
  3. Active State (:active) The appearance when the input is clicked or pressed.
  4. Focus State (:focus) The appearance when the input gains focus (e.g., through keyboard navigation).
  5. Checked depending on the type of input, additional states may apply.
  6. Disabled State The appearance when the input is disabled and cannot be interacted with.

Ensure that your designs account for all these states to provide a consistent and user-friendly experience.

TextDefault
TextBig
TextSuccess
TextError
DisabledDefault
DisabledBig
CheckboxDefault
CheckboxBig
CheckboxSuccess
CheckboxError
DisabledDefault
DisabledBig
RadioDefault
RadioBig
RadioSuccess
RadioError
DisabledDefault
DisabledBig
ToggleDefault
ToggleBig
ToggleSuccess
ToggleError
DisabledDefault
DisabledBig
RangeDefault
RangeBig
RangeSuccess
RangeError
DisabledDefault
DisabledBig

Inputs can be found in the Figma Template in the 👉 Inputs page.

Inputs