Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Switch Component

A versatile Switch, managing state, context, and styling. 
import { Switch } from "@locus-ui/components";import styles from "./styles.css";
<Switch.Root variant="outlined">  <Switch.Label>Show All</Switch.Label></Switch.Root>

View Source

Anatomy

Import the component and its parts:

Anatomy

import { Switch } from "@locus-ui/components";        <Switch.Root>  <Switch.Label /></Switch.Root>

Examples

Variants

Switch components come with three built in variants, solid, outlined, and muted.

variants.tsx

import { Switch } from "@locus-ui/components";
const variants = ["outlined", "solid", "muted"];
return variants.map((variant) => (  <Switch.Root key={variant} variant={variant}>    <Switch.Label>      {variant.charAt(0).toUpperCase() + variant.slice(1)} Switch    </Switch.Label>  </Switch.Root>));

Label Positions

The label element <label> is available in the switch component anatomy. If included it can be easily positioned with the position prop.

label-positions.tsx

import { Switch } from "@locus-ui/components";
const labelPositions = ["top", "bottom", "left", "right"];
return labelPositions.map((position) => (  <Switch.Root key={position} variant="outlined">    <Switch.Label position={position}>      {position.charAt(0).toUpperCase() + position.slice(1)} Label    </Switch.Label>  </Switch.Root>));

Sizes

To manage the size of the switch component you can provide a default or custom size through the size prop.

sizes.tsx

import { Switch } from "@locus-ui/components";
const sizes = ["xs", "sm", "md", "lg", "xl"];
return (  <>    {sizes.map((size) => (      <Switch.Root key={size} size={size} variant="muted">        <Switch.Label>{size.toUpperCase()}</Switch.Label>      </Switch.Root>    ))}    <Switch.Root size="80px" variant="muted">

Colors

The switch component uses the color prop to allow for predefined and custom colors.

colors.tsx

import { Switch } from "@locus-ui/components";
const colors = [  "primary", "secondary", "tertiary",  "success", "danger", "warning", "info",];
return colors.map((color) => (  <Switch.Root defaultChecked key={color} variant="muted" color={color}>    <Switch.Label>      {color.charAt(0).toUpperCase() + color.slice(1)}    </Switch.Label>

Alignments

To set alignment of the switch and its label content you can use the align prop.

alignments.tsx

import { Switch } from "@locus-ui/components";
const alignments = ["start", "center", "end"];
return alignments.map((alignment) => (  <Switch.Root    key={alignment}    align={alignment}    variant="muted"    className="w-1/4"  >    <Switch.Label>

States

Switches can be given the disabled, readonly, and defaultChecked states.

states.tsx

import { Switch } from "@locus-ui/components";
<Switch.Root disabled variant="muted">  <Switch.Label>Disabled</Switch.Label></Switch.Root><Switch.Root readonly variant="muted">  <Switch.Label>Readonly</Switch.Label></Switch.Root><Switch.Root defaultChecked variant="muted">  <Switch.Label>Default Checked</Switch.Label></Switch.Root>