Component

Switch

A square on/off toggle.

stablev0.3.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.
bunx shadcn@3 add @fastrp/switch

Examples

Default

Open alone

API

<Switch />Takes the props of what it wraps

An on/off toggle. A `button` underneath, not a checkbox input: a native input steals the FiveM NUI's keyboard lease until it blurs, and WASD stops moving the player. Sounds `toggle-on` or `toggle-off` through the sound provider's `data-sfx="toggle"`.

Dependencies

npm

  • @radix-ui/react-switch@^1.1.2

Registry

  • @fastrp/utils

Source

components/ds/switch.tsxShow
'use client';

import * as SwitchPrimitive from '@radix-ui/react-switch';
import type * as React from 'react';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

/**
 * An on/off toggle. A `button` underneath, not a checkbox input: a native input steals the FiveM
 * NUI's keyboard lease until it blurs, and WASD stops moving the player. Sounds `toggle-on` or
 * `toggle-off` through the sound provider's `data-sfx="toggle"`.
 */
function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      data-sfx="toggle"
      className={cn(
        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-foreground/15 bg-ink/60 p-0.5 shadow-[inset_0_1px_2px_rgb(0_0_0/0.4)] transition-colors duration-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-selection focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary',
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className="pointer-events-none block size-4 rounded-full bg-muted-foreground shadow-[0_1px_2px_rgb(0_0_0/0.4)] transition-transform duration-base ease-pop data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground"
      />
    </SwitchPrimitive.Root>
  );
}

export { Switch };