Cherry offers several variations for input elements. Inputs facilitate user interaction with applications. While there are no color variations for inputs, Cherry provides two different sizes: 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
Variant
Size
Default
Default
Default
Big
Success
Default
Error
Default
Disabled
Default
Disabled
Big
Checkbox
Variant
Size
Checked
Default
Checked
Big
Success
Default
Error
Default
Disabled
Default
Disabled
Big
Radio
Variant
Size
Checked
Default
Checked
Big
Success
Default
Error
Default
Disabled
Default
Disabled
Big
Toggle
Variant
Size
Checked
Default
Checked
Big
Success
Default
Error
Default
Disabled
Default
Disabled
Big
Range
Variant
Size
Default
Default
Default
Big
Success
Default
Error
Default
Disabled
Default
Disabled
Big
Inputs can be found in the Figma Template in the Inputs page.
