[RFC] How to add a label in TextareaAutosize?

[ooguuiholiv]

What's the problem? 🤔

No response

What are the requirements? ❓

No response

What are our options? 💡

No response

Proposed solution 🟢

No response

Resources and benchmarks 🔗

No response

[DiegoAndai]

@oguuiholiv hi! Are you referring to the TextareaAutosize from Base UI? Please provide more information so I can help you.

[ooguuiholiv]

import { TextareaAutosize } from "@mui/material";
https://mui.com/base-ui/react-textarea-autosize/components-api/#textarea-autosize

It is this materialUi component, according to the documentation there is no way to add a label to the component

[DiegoAndai]

The TextareaAutosize component you can import from Material UI comes from Base UI, our unstyled component library. Material UI reexports the component for convenience.

If you want to add a label to Base UI's unstyled TextareaAutosize, you use Base UI's FormControl. Here's a CodeSandbox example of how to do this: https://codesandbox.io/s/38821-base-ui-form-control-textarea-lrv8vr?file=/Demo.tsx.

If you want to add a label to a Material UI text area with auto size, you can provide the multiline and label props to the TextField component without setting the rows prop. Here's a CodeSandbox example of how to do this: https://codesandbox.io/s/38821-material-ui-text-field-with-label-9ktsy7?file=/Demo.js

Does this cover your use case?

[ZeeshanTamboli]

@ooguuiholiv Alternatively, if you prefer a basic label, you can use the label HTML element and link it to the textarea autosize: https://stackblitz.com/edit/stackblitz-starters-ob3pbr.

I think we can close this issue.