Textarea

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

render(<Preview />)

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

render(<WithRowsEn />)

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

render(<Disabled />)

const ReadOnlyEn = () => {
  return (
    <Field>
      <Label htmlFor='my-textarea-readonly-en'>Case description</Label>
      <FieldDescription>
        This text has been added automatically based on information you have
        already submitted, and cannot be edited.
      </FieldDescription>
      <Textarea
        id='my-textarea-readonly-en'
        readOnly
        value='I am applying for support because I need funding to carry out the project as planned.'
      />
    </Field>
  );
};

render(<ReadOnlyEn />)