Cherry offers several variations for input elements. Inputs facilitate user interaction with applications. While there are no color variations for inputs, Cherry provides three sizes: Small, Default, and Big. Inputs can have error or success states to provide feedback to the user.
States
When customizing your designs, consider all the different states:
Normal - The default appearance of the input.
Hover:hover - When the user hovers the cursor over the input.
Active:active - When the input is clicked or pressed.
Focus:focus - When the input gains focus.
Checked:checked - Depending on the type of input, additional states may apply.
Disabled - When the input cannot be interacted with.
Ensure that your designs account for all these states to provide a consistent
and user-friendly experience.
Text Input
Size
Default
Success
Error
Disabled
Small
Yes
Yes
Yes
Yes
Default
Yes
Yes
Yes
Yes
Big
Yes
Yes
Yes
Yes
Checkbox
Size
Default
Success
Error
Disabled
Small
Yes
Yes
Yes
Yes
Default
Yes
Yes
Yes
Yes
Big
Yes
Yes
Yes
Yes
Radio
Size
Default
Success
Error
Disabled
Small
Yes
Yes
Yes
Yes
Default
Yes
Yes
Yes
Yes
Big
Yes
Yes
Yes
Yes
Toggle
Size
Default
Success
Error
Disabled
Small
Yes
Yes
Yes
Yes
Default
Yes
Yes
Yes
Yes
Big
Yes
Yes
Yes
Yes
Range
Size
Default
Success
Error
Disabled
Small
Yes
Yes
Yes
Yes
Default
Yes
Yes
Yes
Yes
Big
Yes
Yes
Yes
Yes
Inputs can be found in the Figma Template in the Inputs page.
