Text Input

Area where user can enter small amount of text. Commonly used in forms.

Note: This kit does not handle form validation logic.

Summary

Uses Icons

See this kit in action in our sample UI

Default

import React, { useState } from 'react'

import Caption from 'playbook-ui'
import TextInput from 'playbook-ui'
import Title from 'playbook-ui'

const TextInputDefault = (props) => {
  const [firstName, setFirstName] = useState('')
  const handleOnChangeFirstName = ({ target }) => {
    setFirstName(target.value)
  }
  const ref = React.createRef()

  const [formFields, setFormFields] = useState({
    firstName: 'Jane',
    lastName: 'Doe',
    phone: '8888888888',
    email: 'jane@doe.com',
    zip: 55555,
  })

  const handleOnChangeFormField =  ({ target }) => {
    const { name, value } = target
    setFormFields({ ...formFields, [name]: value })
  }

  return (
    <div>
      <TextInput
          aria={{ label: 'hello' }}
          data={{ say: 'hi', yell: 'go' }}
          id="unique-id"
          label="First Name"
          name="firstName"
          onChange={handleOnChangeFormField}
          placeholder="Enter first name"
          value={formFields.firstName}
      />
      <TextInput
          label="Last Name"
          name="lastName"
          onChange={handleOnChangeFormField}
          placeholder="Enter last name"
          value={formFields.lastName}
      />
      <TextInput
          label="Phone Number"
          name="phone"
          onChange={handleOnChangeFormField}
          placeholder="Enter phone number"
          type="phone"
          value={formFields.phone}
      />
      <TextInput
          label="Email Address"
          name="email"
          onChange={handleOnChangeFormField}
          placeholder="Enter email address"
          type="email"
          value={formFields.email}
      />
      <TextInput
          label="Zip Code"
          name="zip"
          onChange={handleOnChangeFormField}
          placeholder="Enter zip code"
          type="number"
          value={formFields.zip}
      />

      <br />
      <br />

      <Title>{'Event Handler Props'}</Title>

      <br />
      <Caption>{'onChange'}</Caption>

      <br />

      <TextInput
          label="First Name"
          onChange={handleOnChangeFirstName}
          placeholder="Enter first name"
          ref={ref}
          value={firstName}
      />

      {firstName !== '' && (
        <React.Fragment>{`First name is: ${firstName}`}</React.Fragment>
      )}
    </div>
  )
}

export default TextInputDefault

With Error

Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

import React, { useState } from 'react'

import TextInput from 'playbook-ui'

const TextInputError = (props) => {
  const [email, setEmail] = useState('')

  const handleUpdateEmail = ({ target }) => {
    setEmail(target.value)
  }
  return (
    <div>
      <TextInput
          addOn={{ icon: 'user', alignment: 'left', border: true }}
          error="Please enter a valid email address"
          label="Email Address"
          onChange={handleUpdateEmail}
          placeholder="Enter email address"
          type="email"
          value={email}
      />
      <TextInput
          addOn={{ icon: 'user', alignment: 'left', border: true }}
          label="Confirm Email Address"
          onChange={handleUpdateEmail}
          placeholder="Confirm email address"
          type="email"
          value={email}
      />
    </div>
  )
}
export default TextInputError

Custom

import React, { useState } from 'react'

import TextInput from 'playbook-ui'

const TextInputCustom = (props) => {
  const [name, setName] = useState('')
  const handleUpdateName = ({ target }) => {
    setName(target.value)
  }
  return (
    <div>
      <TextInput
          label="Custom Label"
      >
        <input
            name="custom-name"
            onChange={handleUpdateName}
            placeholder="custom-placeholder"
            type="text"
            value={name}
        />
      </TextInput>
    </div>
  )
}

export default TextInputCustom

Disabled

import React from 'react'

import TextInput from 'playbook-ui'

class TextInputDisabled extends React.Component {
  render(props) {
    return (
      <div>
        <TextInput
            disabled
            label="Last Name"
            placeholder="Enter last name"
        />
      </div>
    )
  }
}

export default TextInputDisabled

Add On

import React, { useState } from 'react'

import TextInput from 'playbook-ui'

const TextInputAddOn = (props) => {
  const [defaultInput, setDefaultInput] = useState('')
  const [firstInput, setFirstInput] = useState('')
  const [secondInput, setSecondInput] = useState('')
  const [thirdInput, setThirdInput] = useState('')
  const [fourthInput, setFourthInput] = useState('')

  const handleUpdateDefaultInput = ({ target }) => {
    setDefaultInput(target.value)
  }

  const handleUpdateFirstInput = ({ target }) => {
    setFirstInput(target.value)
  }

  const handleUpdateSecondInput = ({ target }) => {
    setSecondInput(target.value)
  }

  const handleUpdateThirdInput = ({ target }) => {
    setThirdInput(target.value)
  }

  const handleUpdateFourthInput = ({ target }) => {
    setFourthInput(target.value)
  }

  return (
    <>
      <div>
        <TextInput
            addOn={{ icon: 'bat' }}
            label="Add On With Defaults"
            onChange={handleUpdateDefaultInput}
            value={defaultInput}
        />
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'user', alignment: 'right', border: true }}
            label="Right-Aligned Add On With Border"
            onChange={handleUpdateFirstInput}
            value={firstInput}
        />
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'percent', alignment: 'right', border: false }}
            label="Right-Aligned Add On With No Border"
            onChange={handleUpdateThirdInput}
            value={thirdInput}
        />
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'frog', alignment: 'right', border: true }}
            label="Right-Aligned Add On With Child Input"
            onChange={handleUpdateFourthInput}
        >
          <input />
        </TextInput>
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'percent', alignment: 'left', border: false }}
            label="Left-Aligned Add On With No Border"
            onChange={handleUpdateSecondInput}
            value={secondInput}
        />
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'percent', alignment: 'left', border: true }}
            label="Left-Aligned Add On With Border"
            onChange={handleUpdateFourthInput}
            value={fourthInput}
        />
      </div>
      <div>
        <TextInput
            addOn={{ icon: 'frog', alignment: 'left', border: true }}
            label="Left-Aligned Add On With Child Input"
            onChange={handleUpdateFourthInput}
        >
          <input />
        </TextInput>
      </div>
    </>
  )
}

export default TextInputAddOn

Inline

import React, { useState } from 'react'

import TextInput from 'playbook-ui'

const TextInputInline = (props) => {
  const [value, setValue] = useState('Inline Input')
  const handleValueChange = ({ target }) => {
    setValue(target.value)
  }
  return (
    <div>
      <TextInput
          inline
          label="Hover Over Text Below"
          onChange={handleValueChange}
          value={value}
      />
    </div>
  )
}

export default TextInputInline

No Label

import React, { useState } from 'react'

import TextInput from 'playbook-ui'

const TextInputNoLabel = (props) => {
  const [email, setEmail] = useState('')

  const handleUpdateEmail = ({ target }) => {
    setEmail(target.value)
  }
  return (
    <div>
      <TextInput
          onChange={handleUpdateEmail}
          placeholder="Enter email address"
          type="email"
          value={email}
      />
    </div>
  )
}
export default TextInputNoLabel

Things to Avoid

Do not use for large amounts of text (use Textarea instead). Avoid using a text input without validation if input is required and using with validation if not required.

UI Samples using Text Input Kit

Get the full picture. See how this kit is used in our samples.

Crm Client List

Crowdsourced Posts

Music App

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat