Area where user can enter small amount of text. Commonly used in forms.
Note: This kit does not handle form validation logic.
<%= 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" }) %>
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).
<%= 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" }) %>
<%= 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 }) %>
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.