# Inputs

> Cherry input design specifications covering text fields, password fields, checkboxes, radios, toggles, range sliders, and dropzones.

Source: https://cherry.al/inputs

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# 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.

<Callout type="warning">
  Ensure that your designs account for all these states to provide a consistent
  and user-friendly experience.
</Callout>

## Text Input

<iframe className="light-only" src="https://demo.cherry.al/preview/input?theme=light" title="Text input" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/input?theme=dark" title="Text input" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Default | Success | Error | Disabled |
| ------- | ------- | ------- | ----- | -------- |
| Small   | Yes     | Yes     | Yes   | Yes      |
| Default | Yes     | Yes     | Yes   | Yes      |
| Big     | Yes     | Yes     | Yes   | Yes      |

Implementation: [Input](/code/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.

<iframe className="light-only" src="https://demo.cherry.al/preview/password?theme=light" title="Password field" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/password?theme=dark" title="Password field" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Default | Revealed | Success | Error | Disabled |
| ------- | ------- | -------- | ------- | ----- | -------- |
| Small   | Yes     | Yes      | Yes     | Yes   | Yes      |
| Default | Yes     | Yes      | Yes     | Yes   | Yes      |
| Big     | Yes     | Yes      | Yes     | Yes   | Yes      |

Implementation: [Password](/code/password)

## Textarea

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

<iframe className="light-only" src="https://demo.cherry.al/preview/textarea?theme=light" title="Textarea" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/textarea?theme=dark" title="Textarea" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Default | Success | Error | Disabled |
| ------- | ------- | ------- | ----- | -------- |
| Small   | Yes     | Yes     | Yes   | Yes      |
| Default | Yes     | Yes     | Yes   | Yes      |
| Big     | Yes     | Yes     | Yes   | Yes      |

Implementation: [Textarea](/code/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.

<iframe className="light-only" src="https://demo.cherry.al/preview/select?theme=light" title="Select" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/select?theme=dark" title="Select" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Default | Success | Error | Disabled |
| ------- | ------- | ------- | ----- | -------- |
| Small   | Yes     | Yes     | Yes   | Yes      |
| Default | Yes     | Yes     | Yes   | Yes      |
| Big     | Yes     | Yes     | Yes   | Yes      |

Implementation: [Select](/code/select)

## Checkbox

<iframe className="light-only" src="https://demo.cherry.al/preview/checkbox?theme=light" title="Checkbox" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/checkbox?theme=dark" title="Checkbox" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Default | Success | Error | Disabled |
| ------- | ------- | ------- | ----- | -------- |
| Small   | Yes     | Yes     | Yes   | Yes      |
| Default | Yes     | Yes     | Yes   | Yes      |
| Big     | Yes     | Yes     | Yes   | Yes      |

Implementation: [Input](/code/input)

## Radio

<iframe className="light-only" src="https://demo.cherry.al/preview/radio?theme=light" title="Radio button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/radio?theme=dark" title="Radio button" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Default | Success | Error | Disabled |
| ------- | ------- | ------- | ----- | -------- |
| Small   | Yes     | Yes     | Yes   | Yes      |
| Default | Yes     | Yes     | Yes   | Yes      |
| Big     | Yes     | Yes     | Yes   | Yes      |

Implementation: [Input](/code/input)

## Toggle

<iframe className="light-only" src="https://demo.cherry.al/preview/toggle?theme=light" title="Toggle" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/toggle?theme=dark" title="Toggle" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Default | Success | Error | Disabled |
| ------- | ------- | ------- | ----- | -------- |
| Small   | Yes     | Yes     | Yes   | Yes      |
| Default | Yes     | Yes     | Yes   | Yes      |
| Big     | Yes     | Yes     | Yes   | Yes      |

Implementation: [Toggle](/code/toggle)

## Range

<iframe className="light-only" src="https://demo.cherry.al/preview/range?theme=light" title="Range slider" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/range?theme=dark" title="Range slider" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size    | Default | Success | Error | Disabled |
| ------- | ------- | ------- | ----- | -------- |
| Small   | Yes     | Yes     | Yes   | Yes      |
| Default | Yes     | Yes     | Yes   | Yes      |
| Big     | Yes     | Yes     | Yes   | Yes      |

Implementation: [Range](/code/range)

## Dropzone

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

<iframe className="light-only" src="https://demo.cherry.al/preview/dropzone?theme=light" title="Dropzone" loading="lazy" style={{ width: "100%", height: "400px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/dropzone?theme=dark" title="Dropzone" loading="lazy" style={{ width: "100%", height: "400px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

<iframe className="light-only" src="https://demo.cherry.al/preview/dropzone-inline?theme=light" title="Inline dropzone" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/dropzone-inline?theme=dark" title="Inline dropzone" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Variant | Default | Drag Over | Disabled |
| ------- | ------- | --------- | -------- |
| Block   | Yes     | Yes       | Yes      |
| Inline  | Yes     | Yes       | Yes      |

Implementation: [Dropzone](/code/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.

<iframe className="light-only" src="https://demo.cherry.al/preview/avatar-dropzone?theme=light" title="Avatar dropzone" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/avatar-dropzone?theme=dark" title="Avatar dropzone" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

| Size           | Empty | Filled | Drag Over | Disabled |
| -------------- | ----- | ------ | --------- | -------- |
| Small (64px)   | Yes   | Yes    | Yes       | Yes      |
| Default (96px) | Yes   | Yes    | Yes       | Yes      |
| Big (128px)    | Yes   | Yes    | Yes       | Yes      |

Implementation: [AvatarDropzone](/code/avatar-dropzone)

<Callout type="note">
  Inputs can be found in the Figma Template in the Components page, alongside
  the Password, Dropzone, and AvatarDropzone component sets.
</Callout>

<Button href="https://www.figma.com/community/file/943862931766586094/Cherry-Design-System" icon="pen-tool" iconPosition="left">
  View in Figma
</Button>