Build / Molecules

Textarea

molecule
play-fn

A multi-line text field, for notes and longer free text.

import { Textarea } from '@meetcard/deck'

Example

<Textarea label="Meeting notes" rows={4} description="Only visible to you" />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <div style={{ maxWidth: 420 }}>
    <Textarea
        label="Meeting notes"
        placeholder="What did you talk about?"
        onChange={fn()} />
</div>;

With a description — who can see what is written here, for instance.

With Description

Source

const WithDescription = () => <div style={{ maxWidth: 420 }}>
    <Textarea
        label="Meeting notes"
        placeholder="What did you talk about?"
        onChange={fn()}
        description="Only visible to you." />
</div>;

In error. aria-invalid is set and the message is announced.

With Error

Source

const WithError = () => <div style={{ maxWidth: 420 }}>
    <Textarea
        label="Meeting notes"
        placeholder="What did you talk about?"
        onChange={fn()}
        error="Notes cannot be longer than 500 characters" />
</div>;

Fixed height, for dense layouts where a resize handle would disrupt flow.

Not Resizable

Source

const NotResizable = () => <div style={{ maxWidth: 420 }}>
    <Textarea
        label="Meeting notes"
        placeholder="What did you talk about?"
        onChange={fn()}
        resize="none" />
</div>;

Disabled, with its text still readable.

Disabled

Source

const Disabled = () => <div style={{ maxWidth: 420 }}>
    <Textarea
        label="Meeting notes"
        placeholder="What did you talk about?"
        onChange={fn()}
        disabled
        defaultValue="Met at SaaSConf." />
</div>;

Props

Prop	Type	Default	Description
`label`required	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`error`	`ReactNode`	—	—
`fieldClassName`	`string`	—	—
`hideLabel`	`boolean`	`false`	—
`resize`	`'none' \| 'vertical'`	`'vertical'`	Allow the user to drag-resize. Vertical only by default.
`rows`	`—`	`4`	—
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	—

Also accepts everything from TextareaHTMLAttributes, so id, data-* and event handlers pass straight through.