Form Select

The form select presents a selectable menu of options. The options within the menu are represented by <option> elements.


React Component

Default

This is a message

Error state with message and disabled option

This is a message

Disabled (with pre-selected option)

Optgroup use

Example on how to pass additional attributes to the component

Note: For a fully styled dropdown selector, see the Dropdown component.

Sage Component

SageFormSelect
<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Default</h3>
<%= sage_component SageFormSelect, {
  name: "Characters",
  id: "characters",
  select_options: [
    {
      text: "-- Please Select a Character --",
      value: "",
    },
    {
      text: "(None Specified)",
      value: "",
    },
    {
      text: "Mario",
      value: "mario",
    },
    {
      text: "Luigi",
      value: "luigi",
    },
    {
      text: "Princess Peach",
      value: "princess-peach",
    },
    {
      text: "Daisy",
      value: "daisy",
    },
    {
      text: "Toad",
      value: "toad",
    },
  ],
  message: "This is a message"
} %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Error state with message and disabled option</h3>
<%= sage_component SageFormSelect, {
  name: "Pets",
  has_error: true,
  select_options: [
    {
      text: "-- Please Select a Pet --",
      value: "",
    },
    {
      text: "(None Specified)",
      value: "",
      selected: true
    },
    {
      text: "Dog",
      value: "dog",
    },
    {
      text: "Cat",
      value: "cat",
    },
    {
      text: "Hamster",
      value: "hamster",
    },
    {
      text: "Parrot",
      value: "parrot",
    },
    {
      text: "Spider",
      value: "spider",
      disabled: true
    },
    {
      text: "Goldfish",
      value: "goldfish",
    },
  ],
  message: "This is a message"
} %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Disabled (with pre-selected option)</h3>
<%= sage_component SageFormSelect, {
  name: "Sports",
  disabled: true,
  select_options: [
    {
      text: "Basketball",
      value: "basketball"
    },
    {
      text: "Football",
      value: "football"
    },
    {
      text: "Lacrosse",
      value: "lacrosse"
    },
    {
      text: "Baseball",
      value: "baseball",
      selected: true
    },
    {
      text: "Blitzball",
      value: "blitzball"
    },
  ]
} %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Optgroup use</h3>
<%= sage_component SageFormSelect, {
  name: "Sports!",
  select_options: [
    {
      text: "Bowling",
      value: "bowling",
    },
    {
      group_label: "Hand Sports",
      group_options: [
        {
          text: "Football",
          value: "football",
        },
        {
          text: "Basketball",
          value: "basketball",
        },
      ],
    },
    {
      text: "Nascar",
      value: "nascar",
      selected: true,
    },
    {
      group_label: "Foot Sports",
      group_options: [
        {
          text: "Soccer",
          value: "soccer",
        },
      ],
    },
  ]
} %>

<script>
  const handleOnChange = (consoles) => {
    var selectedText = consoles.options[consoles.selectedIndex].innerHTML;
    var selectedVal = consoles.value;
    alert("Selected Text: " + selectedText + " Value: " + selectedVal);
  }
</script>
<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Example on how to pass additional attributes to the component</h3>
<%= sage_component SageFormSelect, {
  name: "Consoles",
  component_attributes: {
    onChange: "handleOnChange(this)",
    "my-attribute": "hello"
  },
  select_options: [
    {
      text: "X-Box",
      value: "x-box"
    },
    {
      text: "PlayStation",
      value: "playstation"
    },
    {
      text: "Nintendo Switch",
      value: "switch"
    },
  ]
} %>

<p><strong>Note:</strong> For a fully styled dropdown selector, see the Dropdown component.</p>
Property Description Type Default

disabled

Enabling this property adds the disabled attribute to the component.
⚠️ disabled inputs are not submitted in forms.

Boolean

false

has_error

Enabling this property adds the .sage-form-field--error class to the component.

Boolean

false

message

Sets the message text for the component.

String

nil

name

Unique identifier for this component.

String

nil

select_options

An array of items that will serve as the <select>'s <option>s and <optgroup>s.

Array<{
  text: String,
  value: String (optional),
  disabled: Boolean (false),
  selected: Boolean (false),
  group_label: String,
  group_options: Array<{
    text: String,
    value: String (optional),
    disabled: Boolean (false),
    selected: Boolean (false),
    group_label: String (optional),
    group_options: Array (optional),
  }>,
}>

nil

Do
  • Use the sage-btn-group for more than one button to apply spacing
  • If the context does not already provide positioning settings (such as inside a card or panel footer) use the sage-btn-group--align-end to place buttons on the right side of a space.