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
disabledbooleanstandard input disabled flagfalse
errorbooleanerror state flagfalse
labelstringidentifying string for input
placeholderstringin-field usage hint
rowsnumberexpand the viewable rows (height)4
subLabelstringsupporting text or error messaging