DropZone

File drop zone with v-model support. Wraps the Polaris <s-drop-zone> web component.

Usage

<script setup>
const file = ref('')
</script>

<template>
  <ShDropZone v-model="file" label="Upload image" accept="image/*" />
</template>

Prop	Type	Default	Description
`modelValue`	`string`	—	Bound value (use with `v-model`)
`label`	`string`	—	Drop zone label
`accept`	`string`	—	Accepted file types
`multiple`	`boolean`	—	Allow multiple files
`error`	`string`	—	Error message
`accessibilityLabel`	`string`	—	Accessible label
`labelAccessibilityVisibility`	`'visible' \| 'exclusive'`	—	Label visibility for assistive tech
`required`	`boolean`	—	Marks the field as required
`disabled`	`boolean`	—	Disables the drop zone
`name`	`string`	—	Form field name

Event	Payload	Description
`update:modelValue`	`string`	Emitted when value changes (v-model)
`change`	`Event`	Native change event
`input`	`Event`	Native input event
`droprejected`	`Event`	Emitted when a dropped file is rejected

Slot	Description
`default`	Custom drop zone content

Renders as <s-drop-zone>. See Polaris DropZone docs.

SearchField

Search input with v-model support. Wraps the Polaris <s-search-field> web component.

ColorPicker

Color picker with v-model support. Wraps the Polaris <s-color-picker> web component.