<div> <%= pb_rails("form_group") do %> <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %> <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %> <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %> <% end %> </div>
<div> <%= pb_rails("form_group") do %> <%= pb_rails("text_input", props: { label: "with label", placeholder: "Search" }) %> <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %> <% end %> <br/> <br/> <%= pb_rails("form_group") do %> <%= pb_rails("text_input", props: { placeholder: "Search" }) %> <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %> <% end %> </div>
Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.
<div> <%= pb_rails("form_group", props: { full_width: true }) do %> <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %> <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %> <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %> <% end %> <br/> <br/> <%= pb_rails("form_group", props: { full_width: true }) do %> <%= pb_rails("text_input", props: { placeholder: "Search" }) %> <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %> <% end %> </div>
<div> <%= pb_rails("form_group") do %> <%= pb_rails("text_input", props: { label: "Event", placeholder: "Event Name" }) %> <%= pb_rails("date_picker", props: { label: "Event Date", picker_id: "date-picker-default" }) %> <% end %> </div>
<div> <%= pb_rails("form_group") do %> <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %> <%= pb_rails("select", props: { blank_selection: "Genre", options: [ { value: "Country" }, { value: "Pop" }, { value: "Rock" }, { value: "Hip-Hop/Rap" }, { value: "Classical" }, { value: "Gospel" }, { value: "Alternative" }, { value: "Indie" }, { value: "Other" }, ] }) %> <% end %> </div>
<div> <%= pb_rails("form_group") do %> <%= pb_rails("selectable_card", props: { input_id: "cat1", name: "animal", value: "cat", multi: false }) do %> Cat <% end %> <%= pb_rails("selectable_card", props: { input_id: "dog1", name: "animal", value: "dog", multi: false }) do %> Dog <% end %> <% end %> </div>
<div> <%= pb_rails("form_group") do %> <%= pb_rails("selectable_card_icon", props: { icon: "basketball-ball", title_text: "Basketball", input_id: 7, multi: false, name: "select", }) %> <%= pb_rails("selectable_card_icon", props: { icon: "football-ball", title_text: "Football", input_id: 8, multi: false, name: "select", }) %> <% end %> </div>