Switch

<gstock-switch> | GstockSwitch

<gstock-switch>Switch</gstock-switch>

Checked

Use the checked attribute to activate the switch.

Checked

<gstock-switch checked>Checked</gstock-switch>

Disabled

Use the disabled attribute to disable the switch.

Disabled

<gstock-switch disabled>Disabled</gstock-switch>

Sizes

Use the size attribute to change a switch’s size.

Small

Medium

Large

<gstock-switch size="small">Small</gstock-switch>
<br />
<gstock-switch size="medium">Medium</gstock-switch>
<br />
<gstock-switch size="large">Large</gstock-switch>

Help Text

Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

Label

<gstock-switch help-text="What should the user know about the switch?">Label</gstock-switch>

Custom Styles

Use the available custom properties to change how the switch is styled.

Really big

<gstock-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</gstock-switch>

Form Control

This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.

Required

I’m required

<gstock-switch value="required" required>I'm required</gstock-switch>