Drop

Where a file goes: a real file input, plus drag and drop, paste and the phone's camera.

openvibe-shared/kitJSON

Build it

kit.drop({ name: 'photo', accept: 'image/*', label: 'Choose a photo', hint: 'JPEG, PNG or WebP, up to 20 MB', camera: true, id: 'kit-demo-drop' })

Props

id: any?
auto: any?
hint: string?
name: string?
label: string?
accept: string?
camera: boolean?
multiple: boolean?
required: boolean?

Anatomy

dropWhere a file goes: a real file input, plus drag and drop, paste and the phone's camera.

Behaviour and access

Keyboard: Keeps the focused control in view
Outside tap: Leaves it open
Scroll: The page still scrolls
Reduced motion: Remove movement; keep the state change.
Name: Drop
Target: At least 44 × 44 px on touch
Focus: Visible keyboard focus; follow reading order

States

default

Tokens

color.bg.raised
size.tap

Android · Jetpack Compose

Material 3 Drop

Use Drop in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Drop in SwiftUI with the shared tokens.

Markup

Default

<div class="ovk-drop" data-ovk-drop><input type="file" class="ovk-drop-input" id="kit-demo-drop" name="photo" accept="image/*"><label for="kit-demo-drop" class="ovk-drop-zone"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 20V9M7 14l5-5 5 5M5 4h14"/></svg><strong>Choose a photo</strong><small>JPEG, PNG or WebP, up to 20 MB</small><span class="ovk-drop-name" aria-live="polite"></span></label><label class="ovk-btn ovk-btn--quiet ovk-btn--small ovk-drop-cam" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="3"/><circle cx="9" cy="10" r="1.6"/><path d="m21 16-5-5-8 8"/></svg><span>Take a photo</span><input type="file" accept="image/*" capture="environment" class="ovk-sr" data-ovk-drop-cam></label></div>