Inputs

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:

1. Normal - The default appearance of the input.
2. Hover :hover - When the user hovers the cursor over the input.
3. Active :active - When the input is clicked or pressed.
4. Focus :focus - When the input gains focus.
5. Checked :checked - Depending on the type of input, additional states may apply.
6. Disabled - When the input cannot be interacted with.

Text Input

Implementation: Input

Password

Password fields extend the text input with a reveal toggle pinned inside the field. The revealed state swaps the masked dots for plain text and flips the eye icon.

Implementation: Password

Textarea

Textareas are multi-line text fields for longer content. They share the text input's border, focus ring, and status states.

Implementation: Textarea

Select

Selects are dropdown pickers styled to match the text input, with an arrow indicator that flips while the select is focused or open.

Implementation: Select

Checkbox

Implementation: Input

Radio

Implementation: Input

Toggle

Implementation: Toggle

Range

Implementation: Range

Dropzone

Dropzones are file inputs rendered as dashed drop targets, with a compact inline variant for embedding in forms and modals.

Implementation: Dropzone

Avatar Dropzone

Avatar dropzones are circular, single-file dropzones for profile pictures. The circle is dashed while empty and shows the selected picture with a corner remove button once filled.

Implementation: AvatarDropzone