Textarea

Customise the size of the Textarea via the size prop on field.

{/* standard */}
<Field label="Standard textarea" size="standard">
   <Textarea placeholder="Placeholder" />
</Field>

{/* large */}
<Field label="Large textarea" size="large">
   <Textarea placeholder="Placeholder" />
</Field>

The appearance of the Textarea can be changed by wrapping it with different types of field components.

To achieve a "standard" appearance, wrap the Textarea component with the Field component.

<Field label="Standard textarea" labelVisibility="hidden">
   <Textarea placeholder="Placeholder" />
</Field>

To achieve a "subtle" appearance, wrap the Textarea component with the InlineField component.

<InlineField label="Subtle textarea" labelVisibility="hidden">
  <Textarea placeholder="Placeholder" />
</InlineField>

To control a Textarea provide a value, as well as an onChange function to set the new value whenever it is updated.

const [value, setValue] = React.useState(defaultValue);
const handleChange = (event) => setValue(event.target.value)

return (
  <Stack gap="8">
    <Field label="Controlled example">
      <Textarea value={value} onChange={handleChange} />
    </Field>
    <Text>The current value is: {value}</Text>
  </Stack>
);

When using formData from a request object to populate form data, you can use an uncontrolled Textarea component. In this case, you don't need to provide any state or update functions.

If you're using a form library like react-hook-form that uses an imperative API to retrieve the value of a form control, we forward the ref to the underlying <textarea> element. Here's an example:

const ref = useRef(null);

return (
  <Stack gap="8">
    <Field label="Uncontrolled example">
      <Textarea ref={ref} placeholder="Placeholder" />
    </Field>
  </Stack>
);

Use the counter prop on Field to display a character count indicator. The counter accepts value, maxValue, and isAlwaysVisible parameters.

The counter shows the difference between the current value and maxValue, along with a circular progress indicator. When the value exceeds maxValue, it displays a negative number.

By default, the counter appears when input reaches 50% of maxValue. Use isAlwaysVisible: true to show it at all times.

const [inputValue, setInputValue] = React.useState('');
const maxLength = 40;

return (
  <Field
    className="w-[300px]"
    label="Characters counter demo"
    counter={{
      value: inputValue.length,
      maxValue: maxLength,
      isAlwaysVisible: true
    }}
    errorMessage={inputValue.length > maxLength ? 'Max length exceeded' : undefined}
  >
    <Textarea
      placeholder="Enter text"
      defaultValue={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  </Field>
)

Use the isDisabled prop for <Field/> to show that a TextArea isn't usable.

<Field label="Standard textarea" isDisabled>
   <Textarea placeholder="Placeholder" />
</Field>

This example demonstrates an auto-growing <Textarea/> that adjusts its height dynamically using onChange, ensuring a smooth expansion without vertical scrolling.

const textAreaRef = React.useRef(null);
const adjustHeight = () => {
  const textarea = textAreaRef.current;
  if (textarea) {
    textarea.style.height = "auto"; // Reset height
    textarea.style.height = `${textarea.scrollHeight}px`; // Set new height
  }
};

return (
  <Field
    className="w-full"
    label="Auto-growing textarea"
    labelVisibility="hidden"
  >
    <Textarea
      ref={textAreaRef}
      placeholder="Type something..."
      onChange={adjustHeight}
    />
  </Field>
);

Textarea

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

<Field label="Textarea">
  <Textarea
    className="bg-positive text-primary placeholder:text-primary"
    classNames={{
      focusIndicator: 'border-2 border-input-critical'
    }}
    placeholder="Enter text here..."
  />
</Field>