Resize

Utilities for controlling how an element can be resized.

React propsCSS Properties
resize={keyword}resize: {keyword};

Resize in all directions

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

<> <template preview> <x.textarea resize="both" border borderColor="gray-300" borderRadius /> </template> <x.textarea resize="both" /> </>

Resize vertically

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

<> <template preview> <x.textarea resize="vertical" border borderColor="gray-300" borderRadius /> </template> <x.textarea resize="vertical" /> </>

Resize horizontally

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

<> <template preview> <x.textarea resize="horizontal" border borderColor="gray-300" borderRadius /> </template> <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.

Edit this page on GitHub