Text Input

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

Note: This kit does not handle form validation logic.

See this kit in action in our sample UI

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",
  data: { say: "hi", yell: "go" },
  aria: { something: "hello"},
  id: "unique_id"
}) %>

<%= 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"
}) %>

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" }) %>

Custom

Custom Input

Code Example

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

Disabled

Last Name

Code Example

<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", disabled: true }) %>

Add On

Add On With Defaults

Right-Aligned Add On With Border

Left-Aligned Add On With No Border

Left-Aligned Add On With Border

Right-Aligned Add On With No Border

Code Example

<%= pb_rails("text_input", props: {
  label: "Add On With Defaults",
  add_on: { icon: "bat" }
}) %>

<%= pb_rails("text_input", props: {
  label: "Right-Aligned Add On With Border",
  add_on: { icon: "user", alignment: 'right', border: true }
}) %>

<%= pb_rails("text_input", props: {
  label: "Left-Aligned Add On With No Border",
  add_on: { icon: "percent", alignment: 'left', border: false }
}) %>

<%= pb_rails("text_input", props: {
  label: "Left-Aligned Add On With Border",
  add_on: { icon: "user", alignment: 'left', border: true }
}) %>

<%= pb_rails("text_input", props: {
  label: "Right-Aligned Add On With No Border",
  add_on: { icon: "percent", alignment: 'right', border: false }
}) %>

Inline

Hover Over Text Below

Code Example

<%= pb_rails("text_input", props: {
  inline: true,
  label: "Hover Over Text Below",
  value: "Inline Input"
}) %>

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.

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

Available Props

classname
dark
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
max_width
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
z_index
number_spacing
id
data
aria
children
autocomplete
disabled
error
inline
input_options
label
name
placeholder
required
type
validation
value
add_on