Inputs

Orbit drop zone

A file drop zone that simulates an upload with spinning colored arcs around a progress ring, shows the live percentage, and rejects oversized or unsupported files with an inline error.

Drop a file to attach it

PNG, JPG, WEBP or GIF up to 5 MB

Using Orbit drop zone

A file drop zone that simulates an upload with spinning colored arcs around a progress ring, shows the live percentage, and rejects oversized or unsupported files with an inline error.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accent, maxSizeMb, uploadSeconds, acceptHint

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2297Addon Input GroupInputsA text field wrapped in one bordered shell that can carry a leading icon, a trailing button or text, and shares one focus ring across the whole group.

2792Auto Grow TextareaInputsA multi-line text field that grows taller as the person types more, instead of scrolling inside a fixed box.

2321Clean Text FieldInputsA no-frills bordered text input for a labeled form: neutral at rest, a crisp accent ring on focus, muted when disabled.

2801Compact select menuInputsA trigger button that opens a floating list of choices, with the current pick shown on the button and a check beside it in the list.

2343Drawn check checkboxInputsA checkbox whose check mark draws itself stroke by stroke as the box fills with a solid accent color.

2346Editable date fieldInputsA text field for a date that accepts free typing and can also be filled in from a small calendar popover opened by a trailing icon button.