Aspect Ratio Picker

Aspect ratio and exact size. Pro · Image generation › Prompt and settings

Visual ratio tiles plus exact width × height with ratio lock, orientation swap and snapping.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add aspect-ratio-picker

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { AspectRatioPicker } from 'valyro-ui-pro';

Props

Prop	Type	Default
`value`	`ImageSize`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`ImageSize`		Initial `value` when uncontrolled.
`onValueChange`	`(size: ImageSize) => void`		Called with the new `value` when it changes.
`ratios`	`readonly AspectRatio[]`	`DEFAULT_ASPECT_RATIOS`	Ratio tiles. Default 1:1, 4:3, 3:2, 16:9, 21:9, 3:4, 2:3, 9:16.
`baseSize`	`number`	`1024`	A tile maps to about `baseSize²` pixels: 1024 for SDXL / Flux, 512 for SD 1.5. Default 1024.
`multiple`	`number`		Sizes snap to this multiple (8 for latent space, 64 for most models).
`defaultMultiple`	`number`	`64`	Initial `multiple` when uncontrolled.
`onMultipleChange`	`(multiple: number) => void`		Called with the new `multiple` when it changes.
`multiples`	`readonly number[]`	`[8, 64]`	Choices for the snap toggle; one value hides it. Default [8, 64].
`min`	`number`	`256`	Smallest width or height, px; tiles and typed sizes are clamped to it.
`max`	`number`	`2048`	Largest width or height, px; tiles and typed sizes are clamped to it.
`custom`	`boolean`	`true`	Width × height fields with ratio lock and swap. Default true.
`size`	`'sm' \| 'md'`	`'md'`	Ratio tile size and spacing.
`fieldSize`	`'sm' \| 'md'`	`size`	Height of the width × height fields: `sm` is 32 px, to match other small controls in a sidebar. Defaults to `size`.
`disabled`	`boolean`	`false`	Disables the tiles, size fields, lock, swap and snap toggle.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<AspectRatioPickerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Prompt Editor — Prompt and negative prompt: weights, LoRA, autocomplete, token count
Generation Settings — Model, sampler, steps, CFG, size, presets
Seed Input — Seed: random, fixed, increment
LoRA Stack — LoRA stack: strengths, toggles, order, trigger words
Style Presets — Style cards with previews and weights
Reference Image Input — Reference image for img2img and ControlNet
Generation Progress — Steps, ETA, live latent preview, queue
Image Result Grid — Result gallery with actions and a lightbox
Image Compare — Before/after comparison: slider, side by side, overlay
Inpaint Canvas — Inpainting mask and canvas outpainting
Generation History — Generation history by day, with filters
Image Adjustments — Color grading: upload, fit and seven filter sliders

Previous: Generation Settings · Next: Seed Input · All Image generation