3.5.0






Select

Default


Close
<%= pb_rails("select", props: {
  label: "Favorite Food",
  name: "food",
  options: [
    {
      value: "1",
      value_text: "Burgers",
    },
    {
      value: "2",
      selected: true,
      value_text: "Pizza",
    },
    {
      value: "3",
      value_text: "Tacos",
    },
    {
      value: "4",
      value_text: "BBQ",
    },
  ]
}) %>
Blank Selection Text


Close
<%= pb_rails("select", props: {
  label: "Where do you live",
  name: "location",
  blank_selection: "Select One...",
  options: [
    {
      value: "USA",
    },
    {
      value: "Canada",
    },
    {
      value: "Brazil",
    },
    {
      value: "Philippines",
    },
  ]
}) %>
Disabled Options


Close
<%= pb_rails("select", props: {
  label: "Favorite Coffee",
  name: "coffee",
  options: [
    {
      value: "1",
      disabled: true,
      value_text: "Espresso",
    },
    {
      value: "2",
      selected: true,
      value_text: "Americano",
    },
    {
      value: "3",
      disabled: true,
      value_text: "Cappuccino",
    },
    {
      value: "4",
      value_text: "Mocha",
    },
    {
      value: "5",
      value_text: "Flat White",
    },
    {
      value: "6",
      value_text: "Latte",
    },
  ]
}) %>
Disabled Select Field


Close
<%= pb_rails("select", props: {
  label: "Favorite Dessert",
  disabled: true,
  name: "dessert",
  options: [
    {
      value: "Apple Pie",
    },
    {
      value: "Cookies",
    },
    {
      value: "Ice Cream",
    },
    {
      value: "Brownies",
    },
  ]
}) %>
Required Select Field


Close
<%= pb_rails("select", props: {
  label: "Which shoe do you tie first?",
  required: true,
  name: "shoe",
  blank_selection: "Select One...",
  options: [
    {
      value: "Left",
    },
    {
      value: "Right",
    },
    {
      value: "I go without laces",
    },
  ]
}) %>
Equal option value and value text


Close
<%= pb_rails("select", props: {
  label: "Favorite Sport",
  name: "sports",
  options: [
    {
      value: "Football",
    },
    {
      value: "Baseball",
    },
    {
      value: "Basketball",
    },
    {
      value: "Hockey",
    },
  ]
}) %>
Custom Select


Close
<%= pb_rails("select", props: { label: "Favorite Holiday" }) do %>
  <select name="holiday" id="holiday">
    <option value="1">Christmas</option>
    <option value="2">Thanksgiving</option>
    <option value="3">Halloween</option>
    <option value="4">Fourth of July</option>
  </select>
<% end %>
Dark Select


Close
<%= pb_rails("select", props: {
  label: "Favorite Food",
  name: "food",
  dark: true,
  options: [
    {
      value: "1",
      value_text: "Burgers",
    },
    {
      value: "2",
      selected: true,
      value_text: "Pizza",
    },
    {
      value: "3",
      value_text: "Tacos",
    },
    {
      value: "4",
      value_text: "BBQ",
    },
  ]
}) %>
Select w/ Error


Close
<%= pb_rails("select", props: {
  error: "Please make a valid selection",
  label: "Favorite Food",
  name: "food",
  options: [
    {
      value: "1",
      value_text: "Burgers",
    },
    {
      value: "2",
      selected: true,
      value_text: "Pizza",
    },
    {
      value: "3",
      value_text: "Tacos",
    },
    {
      value: "4",
      value_text: "BBQ",
    },
  ]
}) %>
Select Dark w/ Error


Close
<%= pb_rails("select", props: {
  dark: true,
  error: "Please make a valid selection",
  label: "Favorite Food",
  name: "food",
  options: [
    {
      value: "1",
      value_text: "Burgers",
    },
    {
      value: "2",
      selected: true,
      value_text: "Pizza",
    },
    {
      value: "3",
      value_text: "Tacos",
    },
    {
      value: "4",
      value_text: "BBQ",
    },
  ]
}) %>
Available Props
id
data
classname
aria
children
blank_selection
dark
disabled
error
include_blank
label
multiple
name
onchange
options
required