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.
5. Checked :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.

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