Radio Button

<gstock-radio-button> | GstockRadioButton

Radio buttons are designed to be used with radio groups. When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.

Option 1 Option 2 Option 3 
<gstock-radio-group label="Select an option" name="a">
  <gstock-radio-button value="1">Option 1</gstock-radio-button>
  <gstock-radio-button value="2">Option 2</gstock-radio-button>
  <gstock-radio-button value="3">Option 3</gstock-radio-button>
</gstock-radio-group>

Checked States

To set the initial value and checked state, use the value attribute on the containing radio group.

Option 1 Option 2 Option 3 
<gstock-radio-group label="Select an option" name="a" value="1">
  <gstock-radio-button value="1">Option 1</gstock-radio-button>
  <gstock-radio-button value="2">Option 2</gstock-radio-button>
  <gstock-radio-button value="3">Option 3</gstock-radio-button>
</gstock-radio-group>

Disabled

Use the disabled attribute to disable a radio button.

Option 1 Option 2 Option 3 
<gstock-radio-group label="Select an option" name="a" value="1">
  <gstock-radio-button value="1">Option 1</gstock-radio-button>
  <gstock-radio-button value="2" disabled>Option 2</gstock-radio-button>
  <gstock-radio-button value="3">Option 3</gstock-radio-button>
</gstock-radio-group>

Sizes

Use the size attribute to change a radio button’s size.

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 
<gstock-radio-group size="small" label="Select an option" name="a" value="1">
  <gstock-radio-button value="1">Option 1</gstock-radio-button>
  <gstock-radio-button value="2">Option 2</gstock-radio-button>
  <gstock-radio-button value="3">Option 3</gstock-radio-button>
</gstock-radio-group>

<br />

<gstock-radio-group size="medium" label="Select an option" name="a" value="1">
  <gstock-radio-button value="1">Option 1</gstock-radio-button>
  <gstock-radio-button value="2">Option 2</gstock-radio-button>
  <gstock-radio-button value="3">Option 3</gstock-radio-button>
</gstock-radio-group>

<br />

<gstock-radio-group size="large" label="Select an option" name="a" value="1">
  <gstock-radio-button value="1">Option 1</gstock-radio-button>
  <gstock-radio-button value="2">Option 2</gstock-radio-button>
  <gstock-radio-button value="3">Option 3</gstock-radio-button>
</gstock-radio-group>

Prefix and Suffix Icons

Use the prefix and suffix slots to add icons.

Option 1 Option 2 Option 3 
<gstock-radio-group label="Select an option" name="a" value="1">
  <gstock-radio-button value="1">
    <gstock-icon slot="prefix" name="shopping-cart"></gstock-icon>
    Option 1
  </gstock-radio-button>

  <gstock-radio-button value="2">
    <gstock-icon slot="prefix" name="shopping-bag"></gstock-icon>
    Option 2
  </gstock-radio-button>

  <gstock-radio-button value="3">
    <gstock-icon slot="prefix" name="gift"></gstock-icon>
    Option 3
  </gstock-radio-button>
</gstock-radio-group>

Buttons with Icons

You can omit button labels and use icons instead. Make sure to set a label attribute on each icon so screen readers will announce each option correctly. 

<gstock-radio-group label="Select an option" name="a" value="neutral">
  <gstock-radio-button value="sad">
    <gstock-icon name="frown" size="medium" label="Sad"></gstock-icon>
  </gstock-radio-button>

  <gstock-radio-button value="neutral">
    <gstock-icon name="meh" size="medium" label="Neutral"></gstock-icon>
  </gstock-radio-button>

  <gstock-radio-button value="happy">
    <gstock-icon name="smile" size="medium" label="Happy"></gstock-icon>
  </gstock-radio-button>
</gstock-radio-group>