AvatarDropzone

The AvatarDropzone component is a circular, single-file dropzone for profile pictures. While empty it shows a dashed circle with an icon; a selected image fills the circle and can be removed with the corner button. Selecting a new file replaces the current one.

For design guidelines and all interactive states, see the Inputs design page.

import React from "react";
import { AvatarDropzone } from "cherry-styled-components";

export default function Page() {
  return (
    <AvatarDropzone
      $maxBytes={5 * 1024 * 1024}
      onFileChange={(file) => console.log(file)}
      onFileRejected={({ file, reason }) => console.warn(file.name, reason)}
    />
  );
}

With sizes:

<AvatarDropzone $size="small" />
<AvatarDropzone $size="big" />

Properties

$size"default" | "big" | "small"

Size of the circle: 64px (small), 96px (default), or 128px (big).

$iconIconSource

Icon shown while empty: a Lucide component imported from lucide-react, or a rendered element. Defaults to User.

$maxBytesnumber

Maximum file size in bytes.

aria-labelstring

Accessible label for the drop target. Defaults to "Upload profile picture".

onFileChange(file: File | null) => void

Called with the selected picture, or null when it is removed.

onFileRejected(rejection: DropzoneRejection) => void

Called when a file is rejected for being the wrong type or too big.

acceptstring

Native accept filter. Defaults to "image/*".

disabledboolean

Disables the dropzone: the tile is dimmed and clicks and drops are ignored.

AvatarDropzone forwards its ref to the hidden file input, and any remaining native <input> attributes (name, id, onBlur, and so on) pass through to it. The props above are typed by the exported AvatarDropzoneProps interface.

View Source