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


@State private var textFirstName: String = ""
@State private var textLastName: String = ""
@State private var textPhone: String = ""

PBTextInput(
  "First name",
  text: $textFirstName,
  placeholder: "Enter first name"
)

PBTextInput(
  "Last name",
  text: $textLastName,
  placeholder: "Enter last name"
)

PBTextInput(
  "Phone number",
  text: $textPhone,
  placeholder: "Enter phone number",
  keyboardType: .phonePad
)

With Error


@State private var textError: String = ""
@State private var textConfirmError: String = ""

PBTextInput(
  "Email address",
  text: $textError,
  placeholder: "Enter email address",
  error: (true, "Insert a valid email"),
  style: .leftIcon(.user, divider: true)
)

PBTextInput(
  "Confirm email address",
  text: $textConfirmError,
  placeholder: "Confirm email address",
  style: .leftIcon(.user, divider: true)
)

Disabled


PBTextInput(
  "Last name",
  text: $textDisabled,
  placeholder: "Enter last name",
  style: .disabled
)

Add On


PBTextInput(
  "ADD ON WITH DEFAULTS",
  text: $textAddOn,
  style: .rightIcon(.user, divider: true)
)

PBTextInput(
  "RIGHT-ALIGNED ADD ON WITH BORDER",
  text: $textAddOnRight,
  style: .rightIcon(.user, divider: true)
)

PBTextInput(
  "RIGHT-ALIGNED ADD ON WITH NO BORDER",
  text: $textAddOnRightNoBorder,
  style: .rightIcon(.user, divider: false)
)

PBTextInput(
  "LEFT-ALIGNED ADD ON WITH NO BORDER",
  text: $textAddOnLeft,
  style: .leftIcon(.user, divider: false)
)

PBTextInput(
  "LEFT-ALIGNED ADD ON WITH BORDER",
  text: $textAddOnLeftNoBorder,
  style: .leftIcon(.user, divider: true)
)

Props

Name	Type	Description	Default	Values
title	`String`	Adds a title	`nil`
placeholder	`String`	Adds placeholder text	`""`
error	`(Bool, String)`	Changes the style of the Text Input	`nil`
style	`Style`	Changes the style of the Text Input	`.default`	`.default` `.rightIcon` `.leftIcon` `.inline` `.disabled`
onChange	`Bool`	Adds an event handler	`nil`
keyboardType	`UIKeyboardType`	Speficies the keyboard type (ios only)	`.default`
text	`String`	Sets the Text Input's text value
selected	`Bool`	Changes the style of the Text Input		`true` `false`
isHovering	`Bool`	Changes the style of the Text Input	`false`	`true` `false`
isIconHovering	`Bool`	Changes the style of the Text Input	`false`	`true` `false`

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

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