Textarea

Unable to parse html

const Preview = () => {
  return (
    <>
      <Label htmlFor='my-textarea'>Label</Label>
      <Textarea id='my-textarea' />
    </>
  );
};

render(<Preview />)

Use

Apply the class name ds-input to <textarea>.

Example

With Rows

Use the rows attribute to set the number of visible rows in the text area. This only affects the initial height of the field.

Unable to parse html

const WithRowsEn = () => {
  return (
    <>
      <Label htmlFor='my-textarea-rows'>Description</Label>
      <Textarea id='my-textarea-rows' rows={6} />
    </>
  );
};

render(<WithRowsEn />)

CSS variables and data attributes

Textarea gets styling from ds-input, so we show variables and data attributes from that class here.

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

React