Textarea

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Textarea starts three lines high (rows) and grows with its content up to maxRows lines. Label, help text and error are bound through Field.

Field label

Help text goes here.

LightDark

Copy code

import { Textarea } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="max-w-96">
      <Textarea label="Field label" description="Help text goes here." />
    </div>
  );
}

Character counter

maxLength and showCount turn on the counter. From 80 % of the limit the remaining characters are announced politely; over the limit the field turns invalid. Typing is not blocked.

Field label

0/40

LightDark

Copy code

import { Provider, Textarea } from '@bigbang/ui';
import { useState } from 'react';

export default function Counter() {
  const [value, setValue] = useState('');
  return (
    <Provider locale="en-GB">
      <div className="max-w-96">
        <Textarea label="Field label" maxLength={40} showCount value={value} onValueChange={setValue} />
      </div>
    </Provider>
  );
}

Auto-resize

By default (autoResize) the field grows with its content from rows up to maxRows lines; then it scrolls, and there is no resize handle. Set autoResize={false} for a fixed height that the user can resize vertically.

Field label

LightDark

Copy code

import { Textarea } from '@bigbang/ui';

export default function AutoResize() {
  return (
    <div className="max-w-96">
      <Textarea label="Field label" rows={2} autoResize maxRows={5} />
    </div>
  );
}

States

Required with an error, read-only and disabled fields.

Field label* required

This field cannot be empty.

Field labelSample text

Field labelSample text

LightDark

Copy code

import { Provider, Textarea } from '@bigbang/ui';

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-96 flex-col gap-lg">
        <Textarea label="Field label" required error="This field cannot be empty." />
        <Textarea label="Field label" defaultValue="Sample text" readOnly />
        <Textarea label="Field label" defaultValue="Sample text" disabled />
      </div>
    </Provider>
  );
}

Light and dark mode

Colours come from the color-border-*, color-surface-* and color-text-* tokens.

Light

Field label* required

This field cannot be empty.

Field labelSample text

Field labelSample text

Dark

Field label* required

This field cannot be empty.

Field labelSample text

Field labelSample text

Copy code

import { Provider, Textarea } from '@bigbang/ui';

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-96 flex-col gap-lg">
        <Textarea label="Field label" required error="This field cannot be empty." />
        <Textarea label="Field label" defaultValue="Sample text" readOnly />
        <Textarea label="Field label" defaultValue="Sample text" disabled />
      </div>
    </Provider>
  );
}