Resize

Utilities for controlling how an element can be resized.

Resize in all directions

Use resize="both" to make an element horizontally and vertically resizable.

<x.textarea resize="both" />

Resize vertically

Use resize="vertical" to make an element vertically resizable.

<x.textarea resize="vertical" />

Resize horizontally

Use resize="horizontal" to make an element horizontally resizable.

<x.textarea resize="horizontal" />

Responsive

To control resize at a specific breakpoint, use responsive object notation. For example, adding the property resize={{ md: "both" }} to an element would apply the resize="both" utility at medium screen sizes and above.

<x.textarea resize={{ md: 'both' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.