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

Default

import React, { useState } from 'react'

import { Caption, TextInput, 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, Icon } from 'playbook-ui'

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

  const handleUpdateEmail = ({ target }) => {
    setEmail(target.value)
  }

  const error = (
    <>
      <Icon icon="warning" /> Please enter a valid email address
    </>
  )
  
  return (
    <div>
      <TextInput
          addOn={{ icon: 'user', alignment: 'left', border: true }}
          error={error}
          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

Mask

import React, { useState } from 'react'

import { Caption, TextInput, Title } from 'playbook-ui'

const TextInputMask = (props) => {
  const [ssn, setSSN] = useState('')
  const handleOnChangeSSN = ({ target }) => {
    setSSN(target.value)
  }
  const ref = React.createRef()

  const [formFields, setFormFields] = useState({
    currency: '',
    zipCode: '',
    postalCode: '',
    ssn: '',
    creditCard: '',
    cvv: ''
  })

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

  return (
    <div>
      <TextInput
          label="Currency"
          mask="currency"
          name="currency"
          onChange={handleOnChangeFormField}
          value={formFields.currency}
      />
      <TextInput
          label="Zip Code"
          mask="zipCode"
          name="zipCode"
          onChange={handleOnChangeFormField}
          value={formFields.zipCode}
      />
      <TextInput
          label="Postal Code"
          mask="postalCode"
          name="postalCode"
          onChange={handleOnChangeFormField}
          value={formFields.postalCode}
      />
      <TextInput
          label="SSN"
          mask="ssn"
          name="ssn"
          onChange={handleOnChangeFormField}
          value={formFields.ssn}
      />
      <TextInput
          label="Credit Card"
          mask="creditCard"
          name="creditCard"
          onChange={handleOnChangeFormField}
          value={formFields.creditCard}
      />
      <TextInput
          label="CVV"
          mask="cvv"
          name="cvv"
          onChange={handleOnChangeFormField}
          value={formFields.cvv}
      />

      <br />
      <br />

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

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

      <br />

      <TextInput
          label="SSN"
          mask="ssn"
          onChange={handleOnChangeSSN}
          placeholder="Enter SSN"
          ref={ref}
          value={ssn}
      />

      {ssn !== '' && (
        <React.Fragment>{`SSN is: ${ssn}`}</React.Fragment>
      )}
    </div>
  )
}

export default TextInputMask

Sanitized Masked Input

When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets sanitizedValue.

import React, { useState } from 'react'

import { TextInput } from 'playbook-ui'

const TextInputSanitize = (props) => {
  const ref = React.createRef()

  const [currency, setCurrency] = useState('')
  const [sanitizedCurrency, setSanitizedCurrency] = useState('')
  const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
    setCurrency(target.value)
    setSanitizedCurrency(sanitizedValue);
  }

  const [creditCard, setCreditCard] = useState('')
  const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
  const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
    setCreditCard(target.value)
    setSanitizedCreditCard(sanitizedValue);
  }

  const [ssn, setSSN] = useState('')
  const [sanitizedSSN, setSanitizedSSN] = useState('')
  const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
    setSSN(target.value)
    setSanitizedSSN(sanitizedValue);
  }

  return (
    <div>
      <TextInput
          label="Currency"
          mask="currency"
          onChange={handleOnChangeSanitizeCurrency}
          placeholder="Enter Amount"
          ref={ref}
          value={currency}
      />

      {currency !== "" && (
        <React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
      )}
      <br />
      {sanitizedCurrency !== "" && (
        <React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
      )}

      <br />
      <br />

      <TextInput
          label="Credit Card"
          mask="creditCard"
          onChange={handleOnChangeSanitizeCC}
          placeholder="Enter Card"
          ref={ref}
          value={creditCard}
      />

      {creditCard !== "" && (
        <React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
      )}
      <br />
      {sanitizedCreditCard !== "" && (
        <React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
      )}

      <br />
      <br />

      <TextInput
          label="SSN"
          mask="ssn"
          onChange={handleOnChangeSanitizeSSN}
          placeholder="Enter Amount"
          ref={ref}
          value={ssn}
      />

      {ssn !== "" && (
        <React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
      )}
      <br />
      {sanitizedSSN !== "" && (
        <React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
      )}
    </div>
  )
}

export default TextInputSanitize

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.

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