Skip to content

Textarea

Textarea with auto height

The component can automatically adjust its height as the user types text.

To control the automatic stretching, you can set limits on the number of lines using maxRows and minRows. This way, the area will stretch until a scrollbar appears inside it.

tsx
import React from 'react';
import Textarea from 'intergalactic/textarea';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => (
  <div>
    <Text tag='label' size={200} htmlFor='autoscalable-textarea'>
      Textarea with automatic height
    </Text>
    <Box mt={2}>
      <Textarea
        w={500}
        minRows={4}
        maxRows={10}
        id='autoscalable-textarea'
        name='autoscalable-textarea'
        placeholder='Try typing a really big message'
      />
    </Box>
  </div>
);

export default Demo;
import React from 'react';
import Textarea from 'intergalactic/textarea';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => (
  <div>
    <Text tag='label' size={200} htmlFor='autoscalable-textarea'>
      Textarea with automatic height
    </Text>
    <Box mt={2}>
      <Textarea
        w={500}
        minRows={4}
        maxRows={10}
        id='autoscalable-textarea'
        name='autoscalable-textarea'
        placeholder='Try typing a really big message'
      />
    </Box>
  </div>
);

export default Demo;

Released under the MIT License.

Released under the MIT License.