Group Label

<gstock-group-label> | GstockGroupLabel

Size

Use the size attribute to change the group label size.

Small Group Label Medium Group Label Large Group Label 
<gstock-group-label size="small">Small Group Label</gstock-group-label>
<gstock-group-label size="medium">Medium Group Label</gstock-group-label>
<gstock-group-label size="large">Large Group Label</gstock-group-label>

Integration

This component is designed to be integrated together with other components. Below are some usage examples.

Use the group label component together with option components of the <gstock-menu>.

Group Label 1 Menu Item 1 Menu Item 2 Group Label 2 Menu Item 1 Menu Item 2 Menu Item 3 
<gstock-menu>
  <gstock-group-label>Group Label 1</gstock-group-label>
  <gstock-menu-item>Menu Item 1</gstock-menu-item>
  <gstock-menu-item>Menu Item 2</gstock-menu-item>
  <gstock-group-label>Group Label 2</gstock-group-label>
  <gstock-menu-item>Menu Item 1</gstock-menu-item>
  <gstock-menu-item>Menu Item 2</gstock-menu-item>
  <gstock-menu-item>Menu Item 3</gstock-menu-item>
</gstock-menu>

Autocomplete

Use the group label component together with option components of the <gstock-autocomplete>.

Group Label 1 Option 1 Option 2 Group Label 2 Option 1 Option 2 Option 3 
<gstock-autocomplete>
  <gstock-group-label>Group Label 1</gstock-group-label>
  <gstock-option value="group-1-1">Option 1</gstock-option>
  <gstock-option value="group-1-2">Option 2</gstock-option>
  <gstock-group-label>Group Label 2</gstock-group-label>
  <gstock-option value="group-2-1">Option 1</gstock-option>
  <gstock-option value="group-2-2">Option 2</gstock-option>
  <gstock-option value="group-2-3">Option 3</gstock-option>
</gstock-autocomplete>

Select

Use the group label component together with option components of the <gstock-select>.

Group Label 1 Option 1 Option 2 Group Label 2 Option 1 Option 2 Option 3 
<gstock-select>
  <gstock-group-label>Group Label 1</gstock-group-label>
  <gstock-option value="group-1-1">Option 1</gstock-option>
  <gstock-option value="group-1-2">Option 2</gstock-option>
  <gstock-group-label>Group Label 2</gstock-group-label>
  <gstock-option value="group-2-1">Option 1</gstock-option>
  <gstock-option value="group-2-2">Option 2</gstock-option>
  <gstock-option value="group-2-3">Option 3</gstock-option>
</gstock-select>