Textarea

Displays a form textarea or a component that looks like a textarea.

Code

import { Textarea } from "@falcon/ui-kit";

export function Example() {
  return (
    <Textarea
      aria-label="Delivery instructions"
      placeholder="Type delivery instructions here."
    />
  );
}

Field

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

Code

import { Field, FieldDescription, FieldLabel, Textarea } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="textarea-delivery-instructions">
        Delivery instructions
      </FieldLabel>
      <FieldDescription id="textarea-delivery-instructions-description">
        Enter any handling or staging requirements below.
      </FieldDescription>
      <Textarea
        id="textarea-delivery-instructions"
        placeholder="Type delivery instructions here."
        aria-describedby="textarea-delivery-instructions-description"
      />
    </Field>
  );
}

Disabled

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

Code

import { Field, FieldLabel, Textarea } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field data-disabled>
      <FieldLabel htmlFor="textarea-disabled">Delivery instructions</FieldLabel>
      <Textarea
        id="textarea-disabled"
        placeholder="Type delivery instructions here."
        disabled
      />
    </Field>
  );
}

Invalid

Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Code

import { Field, FieldDescription, FieldLabel, Textarea } from "@falcon/ui-kit";

export function Example() {
  return (
    <Field data-invalid>
      <FieldLabel htmlFor="textarea-invalid">Application notes</FieldLabel>
      <Textarea
        id="textarea-invalid"
        placeholder="Type application notes here."
        aria-invalid
        aria-describedby="textarea-invalid-description"
      />
      <FieldDescription id="textarea-invalid-description">
        Please enter valid application notes.
      </FieldDescription>
    </Field>
  );
}

Button

Pair with Button to create a textarea with a submit button.

Code

import { Button, Textarea } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:grid tw:w-full tw:gap-2">
      <Textarea aria-label="Order notes" placeholder="Type order notes here." />
      <Button>Send notes</Button>
    </div>
  );
}

API

Textarea

Captures multi-line text. Renders a <textarea> element and accepts standard <textarea> props.