Textarea

    <Textarea
      value={demoText.l}
      label="Exposure"
      hint="Light meter accuracy"
      id="description"
      onChange={() => {}}
    />
  

    <Stack gap="m">
      <Textarea id="rowsExample" rows={1} value={demoText.m} onChange={() => {}}/>
      <Textarea id="rowsExample2" rows={4} value={demoText.sl} onChange={() => {}}/>
    </Stack>
  

    () => {
      const [value, setValue] = useState(demoText.xl + demoText.l)
      return (
        <Textarea
          id="maxLengthExample"
          maxLength={700}
          value={value}
          onChange={e => setValue(e.target.value)}
        />
      )
    }
  

    <Textarea
      id="errorExample"
      value={demoText.m}
      hasError
      errorMessage="Too short"
      onChange={() => {}}
    />
  

    <Stack gap="m">
      <Textarea
        id="isReadOnlyExample"
        value={demoText.l}
        isReadOnly
        onChange={() => {}}
      />

      <Textarea
        id="disabledExample"
        value={demoText.l}
        isReadOnly
        onChange={() => {}}
      />
    </Stack>

    <Box padding="l2" backgroundColor="background2" borderSide="all" radius="m">
      <Textarea
        backgroundColor="background"
        id="colorExample"
        onChange={() => {}}
      />
    </Box>
  

    <Box padding="l2" backgroundColor="background3" borderSide="all" radius="m">
      <Textarea.Counter
        length={45}
        maxLength={100}
        backgroundColor="background"
      />
    </Box>
  

    <Stack gap="m">
      <Textarea
        value={demoText.l}
        id="size-m"
        onChange={() => {}}
      />
      <Textarea
        value={demoText.l}
        id="size-l"
        onChange={() => {}}
        size="l"
      />
    </Stack>