Input Aspect Ratio
A controlled aspect-ratio field with common presets and reduced custom values.
Saved crop ratio · 16:9
Input Aspect Ratio is a free forms-inputs component for Next.js, React and Tailwind media authoring tools. It offers common crop presets and lets editors enter a custom positive integer ratio.
The controlled value is always a reduced string such as 16:9. Incomplete or invalid custom drafts stay local until Apply; this is an editing field, distinct from a stage's display-only aspect ratio prop.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/input-aspect-ratioUsage
"use client";
import { useState } from "react";
import { InputAspectRatio } from "@/components/input-aspect-ratio";
export function CropRatioEditor() {
const [ratio, setRatio] = useState("16:9");
return <InputAspectRatio value={ratio} onValueChange={setRatio} label="Media crop ratio" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | required | Controlled canonical ratio using positive integer terms, for example 16:9. |
| onValueChange | (value: string) => void | required | Receives a reduced canonical ratio after selecting a preset or applying a valid custom ratio. |
| label | string | required | Visible fieldset label. |
| className | string | undefined | Additional classes merged onto the fieldset. |
Customisation
The consumer owns persistence and media cropping. The field uses semantic border, surface, muted, primary and focus tokens; its preview is only a ratio illustration.
.crop-editor { max-inline-size: 48rem; }Frequently asked questions
- Does the component crop an image?
- No. It edits a ratio value that the consuming media tool can apply to its own crop surface.
- Can custom ratios be decimal values?
- No. Both terms must be positive whole numbers; accepted values are reduced before they are emitted.