Text area

A text area lets a user input a longer amount of text than a standard text field.

Install
npm install @pluralsight/ps-design-system-textarea
Import
import TextArea from '@pluralsight/ps-design-system-textarea'

Examples

Labels

Primary identification of a text area comes through the label. Usage hints are given in the placeholder. Supporting text and error messaging is set in the subLabel.

import React from 'react'
import TextArea from '@pluralsight/ps-design-system-textarea'

const Comp = () => (
  <div className="example-flex-column">
    <TextArea label="Bio" />
    <TextArea label="Bio" placeholder="What brought you to authoring?" />
    <TextArea
      label="Bio"
      placeholder="What brought you to authoring?"
      subLabel="The short version"
    />
  </div>
)

export default Comp

Appearance

For a more subtle look in the dark theme, use subtle appearance. So subtle.

import React from 'react'
import TextArea from '@pluralsight/ps-design-system-textarea'

const Example = () => (
  <TextArea
    appearance={TextArea.appearances.subtle}
    placeholder="Type some subtleness"
  />
)

export default Example

Disabled

Disabled text inputs are unmodifiable and diminished visually.

import React from 'react'
import TextArea from '@pluralsight/ps-design-system-textarea'

const Comp = () => <TextArea disabled label="Can't touch this" />

export default Comp

Error

Error states are engaged with the error flag. Error-related messaging is sent to the subLabel prop.

import React from 'react'
import TextArea from '@pluralsight/ps-design-system-textarea'

const Comp = () => <TextArea error label="Bio" subLabel="Field is required" />

export default Comp

Rows

To increase the height of the text area, use the rows prop.

import React from 'react'
import TextArea from '@pluralsight/ps-design-system-textarea'

const Comp = () => (
  <TextArea rows={8} label="Bio" subLabel="Field is required" />
)

export default Comp

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

Props

Name	Type	Description	Default
`disabled`	`boolean`	standard input disabled flag	`false`
`error`	`boolean`	error state flag	`false`
`label`	`string`	identifying string for input
`placeholder`	`string`	in-field usage hint
`rows`	`number`	expand the viewable rows (height)	`4`
`subLabel`	`string`	supporting text or error messaging