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

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-textinput
  • Import
    import TextInput from '@pluralsight/ps-design-system-textinput'
Name
Type
Description
Default
appearance
default | subtle
visual style (from TextInput.appearances)
disabledbooleanstandard input disable flag
errorbooleanerror state flag
icon*IconAn Icon component
iconAlign
left | right
horizontal icon placement (from TextInput.iconAligns)
labelstringidentifying string for input
placeholderstringin-field usage hint
refRef || { field: Ref,input: Ref, }refs to access underlying elements
size
medium | small
horizontal icon placement (from TextInput.sizes)
subLabelstringsupporting text or error messaging