PresetFields

The fields of one image preset: name, size, fit, format, quality, weight limit and rules. Use it in the form that creates or edits a preset.

PresetFields

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, PresetFields

Dark theme, PresetFields

High contrast theme, PresetFields

UsageLink to the section Usage

tsx

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

tsx

<PresetFields value={preset} onChange={setPreset} labels={labels}
  fitOptions={fits} formatOptions={formats}
  errors={{ name: 'Give the preset a name.' }}
  notes={{ keepTransparency: { tone: 'warn', message: 'JPEG has no transparency.' } }} />

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

Every field has a visible label, and optional ones say so in words.
Number boxes step with the arrow keys and read the value in the reader locale; units are shown and named in the labels.
Errors are linked with aria-describedby and set aria-invalid; notes that do not block, such as the JPEG warning, carry a glyph and words.
The grid goes from one column on a phone to four on a wide screen.

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