Form

The form kit provides consumers with a convenient, consistently styled <form> wrapper.

Form Helpers

This kit uses rails form_with with our custom builder to render forms using other kits such as text_input, select, and typeahead to name a few. Doing so provides UI consistency within forms and makes adding a form to your page easier.

See this kit in action in our sample UI

Default

Example text field

Example phone field

Example email field

Example number field

Example search field

Example password field

Example url field

Example text area

Example select

Example collection select

Example checkbox

Example Checkbox

Example date picker 1

Code Example

<%
  example_collection = [
    OpenStruct.new(name: "Alabama", value: 1),
    OpenStruct.new(name: "Alaska", value: 2),
    OpenStruct.new(name: "Arizona", value: 3),
    OpenStruct.new(name: "Arkansas", value: 4),
    OpenStruct.new(name: "California", value: 5),
    OpenStruct.new(name: "Colorado", value: 6),
    OpenStruct.new(name: "Connecticut", value: 7),
    OpenStruct.new(name: "Delaware", value: 8),
    OpenStruct.new(name: "Florida", value: 9),
    OpenStruct.new(name: "Georgia", value: 10),
  ]
%>

<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
  <%= form.text_field :example_text_field, props: { label: true } %>
  <%= form.telephone_field :example_phone_field, props: { label: true } %>
  <%= form.email_field :example_email_field, props: { label: true } %>
  <%= form.number_field :example_number_field, props: { label: true } %>
  <%= form.search_field :example_search_field, props: { label: true } %>
  <%= form.password_field :example_password_field, props: { label: true } %>
  <%= form.url_field :example_url_field, props: { label: true } %>
  <%= form.text_area :example_text_area, props: { label: true } %>
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
  <%= form.check_box :example_checkbox,
    data: { field1: "value1", field2: "value2" },
    props: { text: "Example Checkbox", label: true },
    checked_value: "yes",
    unchecked_value: "no",
    id: "checkbox-id",
    name: "checkbox-name",
    class: "checkbox-class"
  %>
  <%= form.date_picker :example_date_picker_1, props: { label: true } %>

  <%= form.actions do |action| %>
    <%= action.submit %>
    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
  <% end %>
<% end %>

<!-- form.typeahead user results example template -->
<template data-typeahead-example-result-option>
  <%= pb_rails("user", props: {
    name: tag(:slot, name: "name"),
    orientation: "horizontal",
    align: "left",
    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
    avatar: true
    }) %>
</template>

<!-- form.typeahead JS example implementation -->
<%= javascript_tag defer: "defer" do %>
  document.addEventListener("pb-typeahead-kit-search", function(event) {
    if (!event.target.dataset || !event.target.dataset.typeaheadExample1) return;

    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
      .then(response => response.json())
      .then((result) => {
        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")

        event.detail.setResults((result.items || []).map((user) => {
          const wrapper = resultOptionTemplate.content.cloneNode(true)
          wrapper.children[0].dataset.user = JSON.stringify(user)
          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
          wrapper.querySelector('img').dataset.src = user.avatar_url
          return wrapper
        }))
      })
  })


  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
    if (!event.target.dataset.typeaheadExample1) return;

    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
    const selectedUserData = JSON.parse(selectedUserJSON)

    // set the input field's value
    event.target.querySelector('input[name=example_user]').value = selectedUserData.login

    // log the selected option's dataset
    console.log('The selected user data:')
    console.dir(selectedUserData)

    // do even more with the data later - TBD
    event.target.dataset.user = selectedUserJSON
  })
<% end %>

Default + Validation

Example text field

Example phone field

Example email field

Example number field

Example project number

Example password field

Example url field

Example text area

Example select

Example collection select

Example checkbox

Example Checkbox

Example date picker 2

Validation displays an error with red border and red text below indicating that the user must fill out the field.

Code Example

<%
  example_collection = [
    OpenStruct.new(name: "Alabama", value: 1),
    OpenStruct.new(name: "Alaska", value: 2),
    OpenStruct.new(name: "Arizona", value: 3),
    OpenStruct.new(name: "Arkansas", value: 4),
    OpenStruct.new(name: "California", value: 5),
    OpenStruct.new(name: "Colorado", value: 6),
    OpenStruct.new(name: "Connecticut", value: 7),
    OpenStruct.new(name: "Delaware", value: 8),
    OpenStruct.new(name: "Florida", value: 9),
    OpenStruct.new(name: "Georgia", value: 10),
  ]
%>

<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
  <%= form.text_field :example_text_field, props: { label: true, required: true } %>
  <%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
  <%= form.email_field :example_email_field, props: { label: true, required: true } %>
  <%= form.number_field :example_number_field, props: { label: true, required: true } %>
  <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
  <%= form.password_field :example_password_field, props: { label: true, required: true } %>
  <%= form.url_field :example_url_field, props: { label: true, required: true } %>
  <%= form.text_area :example_text_area, props: { label: true, required: true } %>
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>

  <%= form.actions do |action| %>
    <%= action.submit %>
    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
  <% end %>
<% end %>

Things to Avoid

Avoid using a form without validation if fields are required and using with validation if not required.

UI Samples using Form Kit

Get the full picture. See how this kit is used in our samples.

Crm Client List

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
shadow
line_height
display
cursor
flex_direction
flex_wrap
justify_content
justify_self
align_items
align_content
align_self
flex
flex_grow
flex_shrink
order
id
data
aria
children
form_system
form_system_options
options
validate