<%= 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",
  id: "last-name"
}) %>

<%= pb_rails("text_input", props: {
    label: "Phone Number",
    type: "phone",
    placeholder: "Enter phone number",
    id: "phone"
}) %>

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

<%= pb_rails("text_input", props: {
    label: "Zip Code",
    type: "number",
    placeholder: "Enter zip code",
    id: "zip"
}) %>

<%= pb_rails("text_input", props: {
  add_on: {
    alignment: "left",
    border: true,
    icon: "user"
  },
  error: raw(pb_rails("icon", props: { icon: "warning" }) + " 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"
  }
}) %>

  <%= pb_rails("text_input", props: {
    label: "Currency",
    mask: "currency",
    margin_bottom: "md",
    name: "currency_name",
    placeholder:"$0.00"
  }) %>

  <%= pb_rails("text_input", props: {
    label: "ZIP Code",
    mask: "zip_code",
    margin_bottom: "md",
    placeholder: "12345"
  }) %>

  <%= pb_rails("text_input", props: {
    label: "Postal Code",
    mask: "postal_code",
    placeholder: "12345-6789",
    margin_bottom: "md",
  }) %>

  <%= pb_rails("text_input", props: {
    label: "SSN",
    mask: "ssn",
    margin_bottom: "md",
    placeholder: "123-45-6789"
  }) %>

  <%= pb_rails("text_input", props: {
    label: "Credit Card",
    mask: "credit_card",
    margin_bottom: "md",
    placeholder: "1234 5678 9012 3456"
  }) %>

  <%= pb_rails("text_input", props: {
    label: "CVV",
    mask: "cvv",
    margin_bottom: "md",
    placeholder: "123"
  }) %>

  <%= pb_rails("title" , props: {
    text: "Hidden Input Under The Hood",
    padding_bottom: "sm"
  })%>

  <%= pb_rails("text_input", props: {
    label: "Currency",
    mask: "currency",
    margin_bottom: "md",
    name: "currency_name",
    id: "example-currency",
    value: "$99.99",
  }) %>

<style>
#example-currency-sanitized {display: flex !important;}
</style>

<%= pb_rails("text_input", props: {
  autocomplete: false,
  label: "autocomplete='off'",
  name: "firstName",
  placeholder: "Enter first name",
}) %>

<%= pb_rails("text_input", props: {
  label: "no autocomplete attribute (let browser decide- basically 'on')",
  name: "lastName",
  placeholder: "Enter last name"
}) %>

<%= pb_rails("text_input", props: {
    autocomplete: true,
    label: "autocomplete='on'",
    name: "phone",
    type: "phone",
    placeholder: "Enter phone number"
}) %>

<%= pb_rails("body", props: { margin_bottom: "sm" }) do %>
  The following have the same autocomplete attributes (email), but have
  different name attributes (email and emailAlt). Many browsers will
  open autocomplete based on name attributes instead of autocomplete:
<% end %>

<%= pb_rails("text_input", props: {
    autocomplete: "email",
    label: "autocomplete='email' name='email'",
    name: "email",
    placeholder: "Enter email address"
}) %>

<%= pb_rails("text_input", props: {
    autocomplete: "email",
    label: "autocomplete='email' name='emailAlt'",
    name: "emailAlt",
    type: "email",
    placeholder: "Enter email address"
}) %>

<%= pb_rails("text_input", props: {
  label: "First Name",
  placeholder: "Enter first name",
  id: "text_input_required_indicator",
  required_indicator: true,
}) %>

<%= pb_rails("text_input", props: {
  emoji_mask: true,
  label: "Emoji Mask",
  placeholder: "Try typing or pasting emojis...",
}) %>