Resize

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "resize"; export const description = "Utilities for controlling how an element can be resized.";

<ApiTable rows={[ ["resize-none", "resize: none;"], ["resize", "resize: both;"], ["resize-y", "resize: vertical;"], ["resize-x", "resize: horizontal;"], ]} />

Examples

Resizing in all directions

Use resize to make an element horizontally and vertically resizable:

<Figure hint="Drag the textarea handle in the demo to see the expected behavior"> <Example> { <textarea rows="2" className="mx-auto block w-80 resize rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20" ></textarea> } </Example> </Figure>

Resizing vertically

Use resize-y to make an element vertically resizable:

<Figure hint="Drag the textarea handle in the demo to see the expected behavior"> <Example> { <textarea rows="2" className="mx-auto block w-80 resize-y rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20" ></textarea> } </Example> </Figure>

Resizing horizontally

Use resize-x to make an element horizontally resizable:

<Figure hint="Drag the textarea handle in the demo to see the expected behavior"> <Example> { <textarea rows="2" className="mx-auto block w-80 resize-x rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20" ></textarea> } </Example> </Figure>

Prevent resizing

Use resize-none to prevent an element from being resizable:

<Figure hint="Notice that the textarea handle is gone"> <Example> { <textarea rows="2" className="mx-auto block w-80 resize-none rounded-md p-2 text-sm text-gray-950 outline-1 outline-gray-900/10 focus:outline-2 focus:outline-gray-900 dark:bg-gray-950/25 dark:text-white dark:outline-1 dark:outline-white/5 dark:focus:outline-white/20" ></textarea> } </Example> </Figure>

Responsive design

<ResponsiveDesign property="resize" defaultClass="resize-none" featuredClass="resize" />