Text area

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

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-textarea
  • Import
    import TextArea from '@pluralsight/ps-design-system-textarea'
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