Text Input

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

Rails
React

Default

First Name

Last Name

Phone Number

Email Address

Zip Code

Code Example

<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold" }) %>
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name" }) %>
<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number" }) %>
<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code" }) %>

Dark

First Name

Last Name

Phone Number

Email Address

Zip Code

Code Example

<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold", dark: true }) %>
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", dark: true }) %>
<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number", dark: true }) %>
<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address", dark: true }) %>
<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code", dark: true }) %>

With Error

Email Address

Please enter a valid email address

Confirm Email Address

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).

Code Example

<%= pb_rails("text_input", props: { error: "Please enter a valid email address", label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
<%= pb_rails("text_input", props: { label: "Confirm Email Address", type: "email", placeholder: "Confirm email address" }) %>

Dark With Error

Email Address

Please enter a valid email address

Confirm Email Address

Code Example

<%= pb_rails("text_input", props: {
  dark: true,
  error: "Please enter a valid email address",
  label: "Email Address",
  type: "email",
  placeholder: "Enter email address"
}) %>

<%= pb_rails("text_input", props: {
  dark: true,
  label: "Confirm Email Address",
  type: "email",
  placeholder: "Confirm email address"
}) %>

Custom

Custom Input

Code Example

<%= pb_rails("text_input", props: {label: "Custom Input"}) do %>
    <input placeholder="Custom placeholder" name="custom-name"></input>
<% end %>

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
id
data
classname
aria
children
dark
disabled
error
label
name
placeholder
required
type
validation
value

4.15.0

Text Input

Things to Avoid