TextArea

Basic TextArea

<TextArea label="Additional information" />
<TextArea label="Additional information" />

Bind data by using value and onChange props just like you would on a native <textarea>.

Also see the official react textarea docs.

import { useState } from "react";
import TextArea from "@intility/bifrost-react/TextArea";
import Button from "@intility/bifrost-react/Button";

export default function () {
  const [value, setValue] = useState("Some text");
  return (
    <div className="bf-page-padding">
      <TextArea
        label="Data binding"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <div>
        <p>TextArea value:</p>
        <pre>{value}</pre>
        <Button onClick={() => setValue("")}>Clear value</Button>
      </div>
    </div>
  );
}

Description text

description prop can be used as hints or additional information about what to fill out.

<TextArea
  placeholder="Type here.."
  label="More information"
  description="This is a description text"
/>
<TextArea
  placeholder="Type here.."
  label="More information"
  description="This is a description text"
/>

Validation

Text areas can have different states. Use feedback to provide additional information.

Use the required prop to render TextArea as required. This will add (required) text after the label.

<TextArea label='Warning' state='warning' feedback='Missing value' required />
<TextArea label='Alert' state='alert' feedback='Invalid value' />
<TextArea label='Warning' state='warning' feedback='Missing value' required />
<TextArea label='Alert' state='alert' feedback='Invalid value' />

Read only

A readOnly textArea is not editable, and gets a "lock" icon next to its label. It is useful for displaying information that can be copied, that should not be changed by the user, but still needs to be visible.

<TextArea
  value="Some text here..."
  label="Additional information"
  description="This is read-only"
  readOnly
/>
<TextArea
  value="Some text here..."
  label="Additional information"
  description="This is read-only"
  readOnly
/>

Disabled

Disable a text area field with the disabled prop.

<TextArea
  value="Some text here..."
  label="Additional information"
  description="This is disabled"
  disabled
/>
<TextArea
  value="Some text here..."
  label="Additional information"
  description="This is disabled"
  disabled
/>