Text input

Text inputs are text boxes that allow users to input custom text entries with a keyboard.

Install
npm install @pluralsight/ps-design-system-textinput
Import
import TextInput from '@pluralsight/ps-design-system-textinput'

Examples

Labels

Primary identification of a text input 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 TextInput from '@pluralsight/ps-design-system-textinput'

const Comp = () => (
  <div className="example-flex-column">
    <TextInput label="First name" />
    <TextInput label="First name" placeholder="Your given name" />
    <TextInput
      label="First name"
      placeholder="Your given name"
      subLabel="As you'd like printed on your badge"
    />
  </div>
)

export default Comp

Icon

Text Inputs may include an icon to the left or right of the field. Read more in the icon docs.

import React from 'react'
import TextInput from '@pluralsight/ps-design-system-textinput'
import { SearchIcon } from '@pluralsight/ps-design-system-icon'

const Comp = () => (
  <div className="example-flex-column">
    <TextInput icon={<SearchIcon />} placeholder="Search" />
    <TextInput
      icon={<SearchIcon />}
      iconAlign={TextInput.iconAligns.right}
      placeholder="Search"
    />
  </div>
)

export default Comp

Appearance

For a more subtle look, use subtle appearance. So subtle. (Switch theme to dark)

import React from 'react'
import TextInput from '@pluralsight/ps-design-system-textinput'
import { SearchIcon } from '@pluralsight/ps-design-system-icon'

const Comp = () => (
  <TextInput
    appearance={TextInput.appearances.subtle}
    icon={<SearchIcon />}
    placeholder="Search"
  />
)

export default Comp

Disabled

Disabled text inputs are unmodifiable and diminished visually.

import React from 'react'
import TextInput from '@pluralsight/ps-design-system-textinput'

const Comp = () => <TextInput 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 TextInput from '@pluralsight/ps-design-system-textinput'

const Comp = () => (
  <TextInput error label="First name" subLabel="Field is required" />
)

export default Comp

Size

The small text input is ideal for usage within table rows otherwise use the default, medium size text input, in forms for example.

import React from 'react'
import TextInput from '@pluralsight/ps-design-system-textinput'

const Comp = () => (
  <div className="example-flex-column">
    <TextInput placeholder="medium text input" />
    <TextInput placeholder="small text input" size={TextInput.sizes.small} />
  </div>
)

export default Comp

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

Props

Name	Type	Description
`appearance`	`default \| subtle`	visual style (from TextInput.appearances)
`disabled`	`boolean`	standard input disable flag
`error`	`boolean`	error state flag
`icon`	`*Icon`	An Icon component
`iconAlign`	`left \| right`	horizontal icon placement (from TextInput.iconAligns)
`label`	`string`	identifying string for input
`placeholder`	`string`	in-field usage hint
`ref`	`Ref \|\| { field: Ref,input: Ref, }`	refs to access underlying elements
`size`	`medium \| small`	horizontal icon placement (from TextInput.sizes)
`subLabel`	`string`	supporting text or error messaging