Text area

A TextArea takes multiline text such as descriptions, queries or JSON. Use InputGroup for a single line.

Usage#

import { TextArea } from "@clawscale/react";

<TextArea value={description} onChange={(event) => setDescription(event.currentTarget.value)} />

Examples#

Basic#

Use TextArea like a <textarea>, controlled or uncontrolled. rows sets the initial height.

Description

core/text-area/basic.tsx

import { FormGroup, TextArea } from "@clawscale/react";

export default function TextAreaBasic() {
  return (
    <FormGroup label="Description" labelFor="text-area-description">
      <TextArea id="text-area-description" placeholder="What this pipeline loads and who depends on it" rows={3} />
    </FormGroup>
  );
}

Auto resize#

autoResize grows the height with the content, so long text never scrolls. Users can still resize the width.

Query

core/text-area/auto-resize.tsx

import { ClawscaleClasses, FormGroup, TextArea } from "@clawscale/react";

const QUERY = `SELECT region, count(*) AS orders
FROM warehouse.orders_daily
WHERE order_date >= current_date - 7
GROUP BY region`;

export default function TextAreaAutoResize() {
  return (
    <FormGroup label="Query" labelFor="text-area-query">
      <TextArea autoResize className={ClawscaleClasses.MONOSPACE} defaultValue={QUERY} fill id="text-area-query" />
    </FormGroup>
  );
}

Fill#

fill stretches the text area to the width of its container.

Incident summary

core/text-area/fill.tsx

import { FormGroup, TextArea } from "@clawscale/react";

export default function TextAreaFill() {
  return (
    <FormGroup label="Incident summary" labelFor="text-area-summary">
      <TextArea
        fill
        id="text-area-summary"
        placeholder="What failed, since when, and which datasets are stale"
        rows={4}
      />
    </FormGroup>
  );
}

Intent#

intent colors the border and focus ring. Explain the problem in the helper text of a FormGroup.

Schema

Invalid JSON: unexpected token on line 3.

core/text-area/intent.tsx

import { ClawscaleClasses, FormGroup, TextArea } from "@clawscale/react";

const SCHEMA = `{
  "order_id": "string",
  "amount": decimal,
  "region": "string"
}`;

export default function TextAreaIntent() {
  return (
    <FormGroup
      helperText="Invalid JSON: unexpected token on line 3."
      intent="danger"
      label="Schema"
      labelFor="text-area-schema"
    >
      <TextArea
        className={ClawscaleClasses.MONOSPACE}
        defaultValue={SCHEMA}
        id="text-area-schema"
        intent="danger"
        rows={5}
      />
    </FormGroup>
  );
}

Size#

size accepts small, medium (default) and large.

core/text-area/size.tsx

import { TextArea } from "@clawscale/react";

export default function TextAreaSize() {
  return (
    <>
      <TextArea aria-label="Small" placeholder="Small" size="small" />
      <TextArea aria-label="Medium" placeholder="Medium" size="medium" />
      <TextArea aria-label="Large" placeholder="Large" size="large" />
    </>
  );
}

Props interface#

TextArea also accepts the HTML attributes of a <textarea>.

interface TextAreaProps extends IntentProps, Props, React.TextareaHTMLAttributes<HTMLTextAreaElement>@clawscale/react

Props	Description
`asyncControl`	`boolean` = `false` Set this to `true` if you will be controlling the `value` of this input with asynchronous updates. These may occur if you do not immediately call setState in a parent component with the value from the `onChange` handler, or if working with certain libraries like __redux-form__.
`autoResize`	`boolean` = `false` Whether the component should automatically resize vertically as a user types in the text input. This will disable manual resizing in the vertical dimension.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`fill`	`boolean` = `false` Whether the text area should take up the full width of its container.
`inputRef`	`React.Ref<HTMLTextAreaElement>` Ref handler that receives HTML `<textarea>` element backing this component.
`intent`	`Intent` Visual intent color to apply to element. Inherited from `IntentProps`
`large`deprecated	`boolean` = `false` Whether the text area should appear with large styling. use `size="large"` instead.
`size`	`Size` = `"medium"` The size styling of the text area.
`small`deprecated	`boolean` = `false` Whether the text area should appear with small styling. use `size="small"` instead.