Switch

Switch is a control component that is used to quickly toggle between two possible states. Switches are only used for binary actions that occur immediately after the user flips it. Commonly used for on and off states.

Basic Usage

Switches are controlled by the checked prop and the value can be consumed by attaching a listener to the update:checked event.

Current value is: false

<Switch :checked="basicChecked" @update:checked="basicChecked = $event" />

Labeled Switches

Switches can also have a text right next to it by setting the label property of the component.

Switch me

<Switch label="Switch me" />

Multiline

Show predictions to sellers, unveiling insights as potent as the finest strain, guiding them through the market highs and lows like expertly rolled joints on a journey of business elevation. Embrace the green, make decisions as smooth as a well-crafted bong hit.

<Switch label="Show predictions to sellers, unveiling insights as potent as the finest strain, guiding them through the market highs and lows like expertly rolled joints on a journey of business elevation. Embrace the green, make decisions as smooth as a well-crafted bong hit."  />

Hint Text

Provided as a prop

Switch meHint text as a prop

<Switch label="Switch me" hint-text="Hint text as a prop" />

Provided as a slot

Switch me Hint text as a slot

<Switch label="Switch me">
  <template #hint>
    Hint text as a <strong>slot</strong>
  </template>
</Switch>

Disabled Switches

Switches can also be disabled by setting their disabled property to true

I am disabled

I am disabled

<Switch disabled label="I am disabled" />
<Switch checked disabled label="I am disabled" />

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• <Switch />