YA Switch

The YaSwitch is a toggle switch control in the YaVendio Design System. It supports multiple types (default, description, outlined), two sizes (md, sm), destructive styling, and flexible positioning.

Quick Start

pnpm dlx shadcn@latest add @yavendio/ya-switch

npx shadcn@latest add @yavendio/ya-switch

yarn dlx shadcn@latest add @yavendio/ya-switch

import { YaSwitch } from '@/components/ui/ya-switch'

export default function Example() {
  const [checked, setChecked] = React.useState(false)

  return (
    <YaSwitch
      checked={checked}
      onCheckedChange={setChecked}
      label="Enable notifications"
    />
  )
}

Types

Three visual types for different use cases.

Default type

Description typeAdditional context for the user

Outlined typeCard-style container with border

Type	Usage	Features
`default`	Simple toggle with label	Compact, label only
`description`	Toggle with context	Label + muted description
`outlined`	Prominent settings	Card container with border, shadow

<YaSwitch type="default" label="Default type" />
<YaSwitch
  type="description"
  label="Description type"
  description="Additional context for the user"
/>
<YaSwitch
  type="outlined"
  label="Outlined type"
  description="Card-style container"
/>

Sizes

Two sizes for the toggle control.

Small size (default)

Medium size

Size	Dimensions	Usage
`sm`	32×18px	Default, compact UIs
`md`	44×24px	Prominent controls

<YaSwitch size="sm" label="Small size (default)" />
<YaSwitch size="md" label="Medium size" />

States

Disabled

Disabled off

Disabled on

<YaSwitch label="Disabled off" disabled />
<YaSwitch label="Disabled on" disabled checked />

Reduces opacity and prevents interaction with pointer-events: none.

Destructive

Apply danger styling for critical settings. Works with all types.

Delete data automaticallyThis will permanently delete old data.

Auto-delete old filesFiles older than 30 days will be permanently deleted.

<YaSwitch
  type="description"
  label="Delete data automatically"
  description="This will permanently delete old data."
  destructive
/>
<YaSwitch
  type="outlined"
  label="Auto-delete old files"
  description="Files older than 30 days will be permanently deleted."
  destructive
/>

Styling: Red text for label and description, red border for outlined type.

Positioning

Control the switch position relative to content.

Right positioned (default)

Left positioned

Position	Description
`right`	Switch on right (default)
`left`	Switch on left

<YaSwitch position="right" label="Right positioned (default)" />
<YaSwitch position="left" label="Left positioned" />

Examples

Settings Panel

Email notificationsReceive updates about your account via email.

Push notificationsGet instant alerts on your device.

Marketing emailsReceive news and promotional offers.

<div className="flex flex-col gap-4">
  <YaSwitch
    type="outlined"
    label="Email notifications"
    description="Receive updates about your account via email."
    checked={emailEnabled}
    onCheckedChange={setEmailEnabled}
  />
  <YaSwitch
    type="outlined"
    label="Push notifications"
    description="Get instant alerts on your device."
    checked={pushEnabled}
    onCheckedChange={setPushEnabled}
  />
</div>

Feature Toggles

Dark mode

Compact view

Auto-save

<YaSwitch
  size="md"
  label="Dark mode"
  checked={features.darkMode}
  onCheckedChange={() => toggleFeature('darkMode')}
/>

Privacy Controls

Privacy Settings

Profile visibilityMake your profile visible to other users

Activity statusShow when you are online

Read receiptsLet others know when you have read their messages

<fieldset>
  <legend className="text-sm font-medium mb-4">Privacy Settings</legend>
  <div className="flex flex-col gap-3">
    <YaSwitch
      type="description"
      label="Profile visibility"
      description="Make your profile visible to other users"
    />
    <YaSwitch
      type="description"
      label="Activity status"
      description="Show when you are online"
    />
  </div>
</fieldset>

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the switch is on
`onCheckedChange`	`(checked: boolean) => void`	-	Change callback
`type`	`'default' \| 'description' \| 'outlined'`	`'default'`	Visual type
`size`	`'md' \| 'sm'`	`'sm'`	Toggle size
`label`	`string`	-	Label text
`description`	`string`	-	Description (description/outlined types)
`disabled`	`boolean`	`false`	Disable interaction
`destructive`	`boolean`	`false`	Danger styling
`position`	`'left' \| 'right'`	`'right'`	Switch position
`className`	`string`	-	Additional classes

Extends all standard <input> checkbox attributes (id, name, value, required, etc.).

Accessibility

Best Practices

Do	Don't
Clear, action-oriented labels: "Enable notifications"	Vague labels: "Option 1"
Use description type for settings needing context	Description type for simple toggles
Use outlined type for critical settings	Outlined type for every toggle
Use `destructive` for dangerous toggles	Red styling without `destructive` prop
Choose appropriate size for context	Mix sizes inconsistently

TypeScript

import { type VariantProps } from 'class-variance-authority'
import {
  yaSwitchWrapperVariants,
  yaSwitchToggleVariants
} from '@/components/ui/ya-switch'

type SwitchType = VariantProps<typeof yaSwitchWrapperVariants>['type']
type SwitchSize = VariantProps<typeof yaSwitchToggleVariants>['size']

YA Checkbox

Similar component for multiple selections

Colors

Color system & tokens

Installation

Setup instructions