Switch with Label

PreviousNext

A switch component with a label

Docs
shadcnui-blockscomponent

Preview

Loading preview…
components/customized/switch/switch-02.tsx
import { Label } from "@/registry/ui/label";
import { Switch } from "@/registry/ui/switch";
import React from "react";

const SwitchWithLabelDemo = () => {
  return (
    <div className="flex items-center gap-3">
      <Switch id="enable-feature" />
      <Label htmlFor="enable-feature">Enable Feature</Label>
    </div>
  );
};

export default SwitchWithLabelDemo;

Installation

npx shadcn@latest add @shadcnui-blocks/switch-02

Usage

import { Switch02 } from "@/components/switch-02"
<Switch02 />