Monsoon v0.2.0
Made by Alexandre Kohler Star

Media and files

Dropzone compact

A single row dropzone for tight forms, here for one PDF up to 2 MB. It needs monsoon.js.

Media and files1 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

Add dropzone-compact next to dropzone. Same options, methods and events as the dropzone.

Classes

1 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the dropzone compact. On a <div> in the example. Sets alignment, gap, height, padding, text style and width.
CSS
.dropzone-compact .dropzone-glyph {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
}

.dropzone-compact .dropzone-area {
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.875rem;
  min-height: 0;
  padding: 0.875rem 1rem;
  text-align: start;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Dropzone compact: start from the base class, then add modifiers -->
<div class="dropzone dropzone-compact max-w-md" data-m-dropzone data-m-dropzone-max-size="2mb"><label class="dropzone-area"><input type="file" name="invoice" accept=".pdf,application/pdf"><span class="dropzone-glyph"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4M7 9l5-5 5 5M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg></span><span class="grid gap-1"><span class="dropzone-title">Upload the invoice</span><span class="dropzone-hint">One PDF, 2 MB at most</span></span></label></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Media and filesDropzoneDrag and drop, click to browse or paste files, with type, size and count validation, previews for images, GIFs, video, audio and documents, progress, retry, remove, reorder and a total; the native input stays in sync so a normal form submit sends the files. It needs monsoon.js. Without it the native file input still works.Two factor and sign inSign in, compactA compact card for popovers, sidebars and embedded flows: the method switcher and code entry in a tight layout with .auth-card-compact. Needs monsoon.js for the code cells.Media and filesImage cropperMove and resize the crop box with its handles or the keyboard, pick an aspect (free, 1:1, 4:3, 16:9, 3:4, circle), zoom with the slider, wheel or a pinch, rotate, flip, and export to a canvas, Blob, data URL or File. Drop or paste another image to crop it. It needs monsoon.js. Without it the image is shown as is.Media and filesAvatar uploadClick, drop or paste a picture to crop it in a circle inside a dialog; saving puts the cropped File into the file input so FormData sends it, writes a data URL into a hidden input when there is one and updates the picture. It needs monsoon.js. Without it the original file is sent.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.