ImageInput
A drop-zone input for uploading images, with previews.
Installation
pnpm dlx shadcn@latest add @chelone/image-inputLoading preview…
A drop-zone input for uploading images, with previews.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| alwaysOn | boolean | — | As a `<FilterForm>`/`<FilterButton>` filter: always shown, never in the add-filter menu. Read off the element by the filter layer, never by the input. |
| defaultValue | NoInfer<SourceValue<TRecord, TPath>> | — | Input-level default, ra precedence (seeds only into an untouched hole). Typed as the value at `source`; `unknown` without a record. |
| disabled | boolean | — | Native disabled state. |
| helperText | ReactNode | — | Helper text rendered below the input; a string is translated. |
| id | string | — | Explicit element id; a generated `useId` value is used otherwise. |
| isRequired | boolean | — | Forces the required marker; ORed with `required()` detection on `validate`. |
| label | ReactNode | — | The input label. A string is translated; a ReactNode renders as-is; `false` (or `""`) renders no label. |
| name | string | — | Legacy field-name alias (ra parity); the wiring uses `source`. |
| onBlur | (event: unknown) => void | — | Chained AFTER the blur is recorded. |
| onChange | (eventOrValue: unknown) => void | — | Chained AFTER the parsed value is written to the form. |
| readOnly | boolean | — | Native read-only state. |
| resource | string | — | Override the ambient resource (used to resolve the default label key). |
| source | TPath | — | The field path RELATIVE to the ambient source scope. |
| validate | Validator | readonly Validator[] | — | ra-contract validators — composed, first error wins. |
| accept | DropzoneOptions["accept"] | — | |
| children | ReactNode | — | |
| className | string | — | |
| format | (value: FileSelection) => FileSelection | — | Read transform (the files in the form → the files shown). Default makes a preview record of each dropped file. |
| inputProps | DropzoneInputProps & React.ComponentProps<"input"> | — | |
| labelMultiple | string | — | |
| labelSingle | string | — | |
| maxSize | DropzoneOptions["maxSize"] | — | |
| minSize | DropzoneOptions["minSize"] | — | |
| multiple | DropzoneOptions["multiple"] | — | |
| onRemove | (file: FileEntry) => void | — | |
| options | DropzoneOptions | — | |
| parse | (value: FileSelection) => FileSelection | — | Write transform (the dropped or remaining files → stored value). Default makes a preview record of each dropped file. |
| placeholder | ReactNode | — | |
| removeIcon | ComponentType<{ className?: string }> | — | |
| validateFileRemoval | unknown | — |