3.5.0


Principles

Kits

Tokens


Text Input

RailsReact
Default

First Name
Last Name
Phone Number
Email Address
Zip Code

Close
<%= 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

Close
<%= 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

Close
<%= 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

Close
<%= 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

Close
<%= pb_rails("text_input", props: {label: "Custom Input"}) do %>
    <input placeholder="Custom placeholder" name="custom-name"></input>
<% end %>
Available Props
id
data
classname
aria
children
dark
disabled
error
label
name
placeholder
required
type
value