ImageField

A form field holding images from the library in order, such as a cover or a gallery. Pick it whenever a form saves image references; pair it with MediaPicker to add.

ImageField

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ImageField

Dark theme, ImageField

High contrast theme, ImageField

UsageLink to the section Usage

tsx

import { ImageField } from '@skribly/ui/media'

tsx

<ImageField label="Gallery" value={images} onChange={setImages}
  addLabel="Add images" onAdd={openPicker} name="gallery"
  itemLabel={(file, i, n) => `Image ${i + 1} of ${n}: ${file.name}`}
  removeLabel={(file) => `Remove ${file.name}`}
  moveEarlierLabel={(file) => `Move ${file.name} earlier`}
  moveLaterLabel={(file) => `Move ${file.name} later`}
  movedLabel={(file, i, n) => `${file.name} is now ${i + 1} of ${n}`}
  errorMessage={error} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A fieldset named by its label.
Each image is a grid row named with its position, and its buttons are reached with Tab.
Moving announces the new position and keeps focus on a move button even at the ends; removing moves focus to the next image or the add button.
Drag handles add keyboard and screen reader dragging.
An error is linked to the add button with aria-describedby and aria-invalid and the list gets a dashed outline, so it shows without colour too.
Use requiredLabel so "required" is read.

This demo runs through axe in all three themes on every test run. See what the tests check.