MediaPicker
A dialog for choosing one or more files from the library, with search, folders and upload. Use it behind an ImageField or any "choose an image" button.
- MediaPicker
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, MediaPicker
Dark theme, MediaPicker
High contrast theme, MediaPicker
UsageLink to the section Usage
import { MediaPicker } from '@skribly/ui/media'<MediaPicker trigger={<Button>Open the library</Button>} title="Media library"
closeLabel="Close" cancelLabel="Cancel" gridLabel="Images" selectLabel="Select"
chooseLabel={(n) => `Choose ${n}`} countLabel={(n) => `${n} chosen`}
items={files} onChoose={setChosen}
search={{ label: 'Search images', value: query, onChange: setQuery }}
folders={{ label: 'Folder', chips, selected: folder, onChange: setFolder }} />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 modal dialog named by its title: focus moves in and is held there, Escape and the close button leave it, and focus returns to the trigger.
- On a phone it rises from the bottom as a sheet, with the actions in a footer that never scrolls away.
- Choices survive a search or a folder change, the count is announced, and the choose button stays disabled until something is chosen.
- In single mode a click or Enter on a tile chooses it at once, and its checkbox only selects it.
- A load error is an assertive alert with a way to retry.
This demo runs through axe in all three themes on every test run. See what the tests check.