Form Input

Text Input

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`

Textarea

Default


@State var defaultText = ""
@State var placeholderText = ""
@State var customText = "Default value text"

VStack(alignment: .leading, spacing: Spacing.small) {
  PBTextArea(
    "Label",
    text: $defaultText
  )

  PBTextArea(
    "Label",
    text: $placeholderText,
    placeholder: "Placeholder with text"
  )

  PBTextArea(
    "Label",
    text: $customText
  )
}

Textarea w/ Error


PBTextArea(
  "Label",
  text: $errorText,
  error: "This field has an error!"
)

Props

Name	Type	Description	Default	Values
characterCount	`CharacterCount`	Adds a character counter to the Textarea	`.noCount`	`.noCount` `.count` `.maxCharacterCount` `.maxCharacterCountBlock` `.maxCharacterCountError`
inline	`Bool`	Changes the style of the Textarea	`false`	`true` `false`
label	`String`	Adds a label	`nil`
placeholder	`String`	Adds placeholder text	`nil`
text	`String`	Sets the Textarea's text value	`Binding<String>`
error	`String`	Changes the style of the Textarea	`nil`

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

Github

Connect Chat