<Form>
    <Form.TextArea label="Quotes" placeholder="Aren't you a little short for a stormtrooper?" />
</Form>

Labels and Placeholders

Labels should be used to describe the information we're asking the user to give us. Placeholders should be used to show an example of the content we're asking the user for. If we use placeholders as labels, once the user starts typing into the field, they lose the description of what we're asking for.

<Form>
    <Form.TextArea label="Quotes" placeholder="Aren't you a little short for a stormtrooper?" />
</Form>
<Form>
    <Form.TextArea label="" placeholder="Quotes" />
</Form>

Label Help

Labels can have a help icon with a tooltip to provide additional context to a label.

<Form>
    <Form.TextArea
        label="Input Label"
        labelProps={{
            help: "This is help text"
        }}
    />
</Form>

Required and Optional

A visual indicator can be applied on a Textarea's label.

<Form>
    <Form.TextArea
        label="Required Label"
        labelProps={{
            required: true
        }}
    />
    <Form.TextArea
        label="Optional Label"
        labelProps={{
            optional: true
        }}
    />
</Form>

States

<Form>
    <Headline el="div" className="m-b-4" size="small">Textarea with Description</Headline>
    <Form.TextArea label="Quotes" placeholder="Aren't you a little short for a stormtrooper?" description="Description goes here..."/>
</Form>
<Form>
    <Headline el="div" className="m-b-4" size="small">Disabled Textarea</Headline>
    <Form.TextArea label="Quotes" placeholder="Aren't you a little short for a stormtrooper?" disabled />
</Form>
<Form>
    <Headline el="div" className="m-b-4" size="small">Readonly Textarea</Headline>
    <Form.TextArea label="Quotes" placeholder="Aren't you a little short for a stormtrooper?" readOnly />
</Form>
<Form>
    <Headline el="div" className="m-b-4" size="small">Error Textarea</Headline>
    <Form.TextArea label="Quotes" placeholder="Aren't you a little short for a stormtrooper?" readOnly error="This field is required." />
</Form>

Best Practices

TextAreas should:

  • Be clearly labeled so it’s obvious to the user what they should enter into the field
  • Only ask for information that’s really needed
  • Validate input as soon as merchant has finished interacting with a field (but not before)

Related Components

  • To build a full form, use the Form component.
  • For a single line of text, use an Input.

Importing

We recommend using the Form shorthand component <Form.TextArea />. It automatically provide the correct Form grouping structure and spacing. You can import the standalone component for custom Form layouts.

import { TextArea } from '@servicetitan/design-system';