Form Select
The form select presents a selectable menu of options. The options within the menu are represented by <option> elements.
Default
Error state with message and disabled option
Disabled (with pre-selected option)
Optgroup use
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 |
---|---|---|---|
|
Enabling this property adds the |
Boolean |
|
|
Enabling this property adds the |
Boolean |
|
|
Sets the message text for the component. |
String |
|
|
Unique identifier for this component. |
String |
|
|
An array of items that will serve as the |
|
|
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.