How to set initial height on Textarea?

[ClaudiuHBann]

I have a textarea that looks like:

<Textarea
 variant="filled"
 size="md"
 radius="md"
 label="Input"
 resize="vertical"
 description="Insert Your Values Below"
 placeholder="Write your values here..."
 value={inputValue}
 onChange={(event) => setInputValue(event.currentTarget.value)}
/>

when i set the h property like h={rem(200)} the textarea height doesnt change but the space taken by it does:

What am i doing wrong?

[yverby]

h prop applies to Textarea wrapper element, not textarea element itself
Most likely you need to use minRows and maxRows instead of h prop

[ClaudiuHBann]

I added minRows={20} and maxRows={50} on the textarea but the height doesnt change

[GOATsann]

You need to set autosize to true forminRows={20} and maxRows={50} to work.

[tombohub]

This the textarea style API: https://mantine.dev/core/textarea/#styles-api

I did not try it but I presume you have to apply classes in all the elements until you achieve desired look. I think you'll need to make the root display:flex, and then inside make the textarea flex-grow:1 and then you can apply height to the Textarea component and textarea html element should stretch.

[ClaudiuHBann]

I didn't know you can do this, thanks!

If someone had my problem, here we go:

1. Create a css file FileName.module.css (the extension .module.css is a MUST)
2. Import the css module in the component like import classes from "./FileName.module.css";
3. Set the classNames property of the Textarea like classNames={{ input: classes.input }}

[BeemWex]

You can also do it inline like: <Textarea h={200} styles={{wrapper:{height:'100%'},input:{height:'100%'}}} />