Switch

Basic

The Switch component is used for toggling between two states (on/off). It supports various customization options.

<Switch v-model="isChecked"></Switch>

The basic usage of the Switch component involves binding a data property using the v-model directive. This directive automatically syncs the switch value with the specified data property, allowing for two-way data binding.

Type

The switchingType prop allows you to specify the type of switching mechanism. The available types are "checkbox" and "switch".

<Switch 
    switchingType="checkbox" 
    v-model="isChecked">
</Switch>
<Switch 
    switchingType="switch" 
    v-model="isChecked">
</Switch>

Label

The label prop allows you to specify the label displayed next to the switch.

<Switch 
    label="Enable Notifications" 
    v-model="isChecked">
</Switch>

Disabled

The disabled prop disables the switch if set to true.

<Switch 
    disabled
    v-model="isChecked">
</Switch>

Help

The help prop allows you to specify help text displayed below the switch.

<Switch 
    help="This switch enables or disables notifications." 
    v-model="isChecked">
</Switch>

Required

The required prop indicates whether the switch is required.

<Switch 
    required 
    label="Accept Terms" 
    v-model="isChecked">
</Switch>

Mode

The mode prop allows you to specify the styling mode of the switch. The available modes are "outlined", "underlined", "filled", and "none".

<Switch 
    mode="outlined" 
    v-model="isChecked">
</Switch>
<Switch 
    mode="underlined" 
    v-model="isChecked">
</Switch>
<Switch 
    mode="filled" 
    v-model="isChecked">
</Switch>
<Switch 
    mode="none" 
    v-model="isChecked">
</Switch>

Rounding

The rounded prop allows you to specify the rounding of the switch corners. The available values are 1 to 10, number, and "full".

<Switch 
    :rounded="2" 
    v-model="isChecked">
</Switch>
<Switch 
    :rounded="5" 
    v-model="isChecked">
</Switch>
<Switch 
    rounded="full" 
    v-model="isChecked">
</Switch>

Icons

The iconActive and iconInactive props allow you to specify icons displayed when the switch is active and inactive respectively.

<Switch 
    iconActive="lucide:sun" 
    iconInactive="lucide:moon-star" 
    switchingType="switch" 
    v-model="isChecked">
</Switch>

Custom CSS Class

The class prop allows you to apply custom CSS classes to the switch container, enabling you to style it according to your design requirements.

<Switch 
    class="custom-switch-class" 
    v-model="isChecked">
</Switch>