Switch

The switch component is a UI element that allows users to toggle between two states, typically "on" and "off". It is commonly used for settings, preferences, or any binary choice in an application, it provides a more intuitive and visually appealing way to represent a boolean option compared to a traditional checkbox.

• Settings
• Usage
• Variants
• Sizes
• States
  • State: Disabled

Settings

The Switch component accepts the following props:

Prop	Type	Default	Description
variant	TColours	primary	The visual style of the switch.
disabled	boolean	false	Whether the switch is disabled.
size	TSizes	md	The size of the switch.
modelValue	boolean	false	The current state of the switch (on/off).

Usage

The Switch component can be used as follows:

Status: Off

Show code

<LxFlex>
	<LxSwitch v-model="value" />
</LxFlex>

Variants

The Switch component supports the following variants (and their active state):

Primary

Secondary

Accent

Info

Success

Danger

White

Black

Show code

<LxFlex wrap>
	<LxFlex direction="column" gap="0">
		<LxSwitch variant="primary" />
		<LxSwitch variant="primary" :model-value="true" />
		<p class="lx-margin--none">Primary</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch variant="secondary" />
		<LxSwitch variant="secondary" :model-value="true" />
		<p class="lx-margin--none">Secondary</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch variant="accent" />
		<LxSwitch variant="accent" :model-value="true" />
		<p class="lx-margin--none">Accent</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch variant="info" />
		<LxSwitch variant="info" :model-value="true" />
		<p class="lx-margin--none">Info</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch variant="success" />
		<LxSwitch variant="success" :model-value="true" />
		<p class="lx-margin--none">Success</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch variant="danger" />
		<LxSwitch variant="danger" :model-value="true" />
		<p class="lx-margin--none">Danger</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch variant="white" />
		<LxSwitch variant="white" :model-value="true" />
		<p class="lx-margin--none">White</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch variant="black" />
		<LxSwitch variant="black" :model-value="true" />
		<p class="lx-margin--none">Black</p>
	</LxFlex>
</LxFlex>

Sizes

The Switch component supports the following sizes:

2XS

XS

SM

MD

LG

XL

2XL

3XL

Show code

<LxFlex wrap>
	<LxFlex direction="column" gap="0">
		<LxSwitch size="2xs" />
		<p class="lx-margin--none">2XS</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch size="xs" />
		<p class="lx-margin--none">XS</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch size="sm" />
		<p class="lx-margin--none">SM</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch size="md" />
		<p class="lx-margin--none">MD</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch size="lg" />
		<p class="lx-margin--none">LG</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch size="xl" />
		<p class="lx-margin--none">XL</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch size="2xl" />
		<p class="lx-margin--none">2XL</p>
	</LxFlex>
	<LxFlex direction="column" gap="0">
		<LxSwitch size="3xl" />
		<p class="lx-margin--none">3XL</p>
	</LxFlex>
</LxFlex>

States

The Switch component can be in the following states:

State: Disabled

To disable the Switch component, apply the disabled prop:

Show code

<LxFlex>
	<LxSwitch disabled />
</LxFlex>