Textarea

Area where user can enter larger amounts of text. Commonly used in forms.

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

Dribbble

Github

Connect Chat