Option

<gstock-option> | GstockOption

Sizes

Use the size attribute to change size of the option.

Small Option 1 Small Option 2 Small Option 3 
<div>
  <gstock-option size="small">Small Option 1</gstock-option>
  <gstock-option size="small">Small Option 2</gstock-option>
  <gstock-option size="small">Small Option 3</gstock-option>
</div>

Medium Option 1 Medium Option 2 Medium Option 3 
<div>
  <gstock-option size="medium">Medium Option 1</gstock-option>
  <gstock-option size="medium">Medium Option 2</gstock-option>
  <gstock-option size="medium">Medium Option 3</gstock-option>
</div>

Large Option 1 Large Option 2 Large Option 3 
<div>
  <gstock-option size="large">Large Option 1</gstock-option>
  <gstock-option size="large">Large Option 2</gstock-option>
  <gstock-option size="large">Large Option 3</gstock-option>
</div>

Disabled

Use the disabled attribute to disable an option and prevent it from being selected.

Option 1 Option 2 Option 3 Option 4 
<div>
  <gstock-option>Option 1</gstock-option>
  <gstock-option disabled>Option 2</gstock-option>
  <gstock-option disabled>Option 3</gstock-option>
  <gstock-option>Option 4</gstock-option>
</div>

Prefix and suffix

Use the prefix and suffix attributes to add icons.

Email Phone Chat 
<div>
  <gstock-option value="option-1" size="small" prefix="mail" suffix="chevron-right">
    Email
  </gstock-option>
  <gstock-option value="option-2" size="small" prefix="phone" suffix="chevron-right">
    Phone
  </gstock-option>
  <gstock-option value="option-3" size="small" prefix="message-square" suffix="chevron-right">
    Chat
  </gstock-option>
</div>

Email Phone Chat 
<div>
  <gstock-option value="option-1" size="medium" prefix="mail" suffix="chevron-right">
    Email
  </gstock-option>
  <gstock-option value="option-2" size="medium" prefix="phone" suffix="chevron-right">
    Phone
  </gstock-option>
  <gstock-option value="option-3" size="medium" prefix="message-square" suffix="chevron-right">
    Chat
  </gstock-option>
</div>

Email Phone Chat 
<div>
  <gstock-option value="option-1" size="large" prefix="mail" suffix="chevron-right">
    Email
  </gstock-option>
  <gstock-option value="option-2" size="large" prefix="phone" suffix="chevron-right">
    Phone
  </gstock-option>
  <gstock-option value="option-3" size="large" prefix="message-square" suffix="chevron-right">
    Chat
  </gstock-option>
</div>

For custom prefixes and suffixes with HTML, use the prefix and suffix slots.

Email Phone Chat 
<div>
  <gstock-option value="option-1" size="small">
    <gstock-icon slot="prefix" name="mail"></gstock-icon>
    Email
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-2" size="small">
    <gstock-icon slot="prefix" name="phone"></gstock-icon>
    Phone
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-3" size="small">
    <gstock-icon slot="prefix" name="message-square"></gstock-icon>
    Chat
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
</div>

Email Phone Chat 
<div>
  <gstock-option value="option-1" size="medium">
    <gstock-icon slot="prefix" name="mail"></gstock-icon>
    Email
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-2" size="medium">
    <gstock-icon slot="prefix" name="phone"></gstock-icon>
    Phone
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-3" size="medium">
    <gstock-icon slot="prefix" name="message-square"></gstock-icon>
    Chat
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
</div>

Email Phone Chat 
<div>
  <gstock-option value="option-1" size="large">
    <gstock-icon slot="prefix" name="mail"></gstock-icon>
    Email
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-2" size="large">
    <gstock-icon slot="prefix" name="phone"></gstock-icon>
    Phone
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-3" size="large">
    <gstock-icon slot="prefix" name="message-square"></gstock-icon>
    Chat
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
</div>