Gseller Switch

Dependências

Certifique-se de ter as seguintes dependências instaladas:

• tailwindcss
• postcss
• autoprefixer
• tailwind-merge
• clsx
• @radix-ui/react-switch

Instalação

  yarn add @gseller-monorepo/switch
  or
  npm install @gseller-monorepo/switch
  or
  pnpm add @gseller-monorepo/switch

Exemplo de uso com React Hook Form e componentes do UI Shadcn

  <FormField
    control={form.control}
    name="enabled"
    render={({ field }) => (
      <FormItem className="flex items-center gap-2 cursor-pointer">
        <FormControl>
          <SwitchComponent
            checked={field.value}
            title="Cupom ativo"
            onCheckedChange={field.onChange}
            id="enabled"
          />
        </FormControl>
        <FormLabel
          className="!mt-0 cursor-pointer"
          htmlFor="enabled"
        >
          Cupom ativo
        </FormLabel>
        <FormMessage />
      </FormItem>
    )}
  />