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

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

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

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

<%= 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: "Right-Aligned Add On With No Border",
  add_on: { icon: "percent", alignment: 'right', border: false }
}) %>

<%= 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: {
  inline: true,
  label: "Hover Over Text Below",
  value: "Inline Input"
}) %>

<%= pb_rails("text_input", props: {
  placeholder: "Enter email address",
  type: "email"
}) %>

<%= pb_rails("text_input", props: {
  placeholder: "Placeholder", 
  input_options: {
    id: "testing-one-time-code",
    autocomplete: "one-time-code",
    name:"auth-token",
    inputmode:"numeric",
    pattern:"[0-9]*",
    type: "text"
  }
}) %>