Form Select

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

React Component

Default

Characters

This is a message

Error state with message and disabled option

Pets

This is a message

Disabled (with pre-selected option)

Sports

Optgroup use

Sports!

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",
        },
      ],
    },
  ]
} %>

<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`

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.