TextArea

A TextArea is a multi-line text field for longer, free-form input. It auto-resizes to fit its content and supports row limits, letter sizes, icon slots, a clear affordance, and explicit validation and read-only states.

Usage

import { TextArea } from '@workflowbuilder/ui';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState('');
  return (
    <TextArea
      size="m"
      state={value ? 'success' : 'default'}
      label="Description"
      helperText="Explain what this workflow does"
      placeholder="Multi-line input"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  );
}

Props

Also accepts every standard <textarea> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

clearLabel

Typestring

Accessible name for the clear affordance rendered when `onClear` is provided.

helperText

TypeReactNode

isRequired

Typeboolean

label

TypeReactNode

maxRows

Typenumber

minRows

Typenumber

onClear

Type() => void

Renders a clear affordance that invokes this callback.

prefixIcon

TypeReactNode

size

TypeExclude<FieldSize, 'xs'>

state

TypeFieldState

Default'default'

Disabled controls take precedence over the read-only state.

style

TypeComponentPropsWithoutRef<TextareaAutosize>['style']

suffixIcon

TypeReactNode

CSS variables

Color

--wb-public-textarea-color

--wb-public-textarea-color-disabled

--wb-public-textarea-placeholder-color

--wb-public-textarea-root-background-color

--wb-public-textarea-root-background-color-disabled

--wb-public-textarea-root-background-color-critical

--wb-public-textarea-root-background-color-success

--wb-public-textarea-root-border-color

--wb-public-textarea-root-border-color-hover

--wb-public-textarea-root-border-color-focus

--wb-public-textarea-root-border-color-critical

--wb-public-textarea-root-border-color-success

--wb-public-textarea-root-icon-color

--wb-public-textarea-root-color-disabled

--wb-public-field-label-color

--wb-public-field-helper-color

--wb-public-field-critical-color

--wb-public-field-success-color

--wb-public-field-color-disabled

--wb-public-field-required-color-disabled

Size

--wb-public-textarea-root-border-size

--wb-public-field-gap

--wb-public-field-row-min-height

--wb-public-field-font-size

--wb-public-field-font-weight

--wb-public-field-line-height

--wb-public-input-padding-l

--wb-public-input-padding-m

--wb-public-input-padding-s

--wb-public-input-padding-xs

--wb-public-input-border-radius-l

--wb-public-input-border-radius-m

--wb-public-input-border-radius-s

--wb-public-input-border-radius-xs

--wb-public-input-gap-l

--wb-public-input-gap-m

--wb-public-input-gap-s

--wb-public-input-gap-xs